@jobber/components 8.27.0 → 8.27.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/BottomSheet-cjs.js +8 -7
- package/dist/BottomSheet-es.js +9 -8
- package/dist/ComboboxChipRemove-es.js +2 -2
- package/dist/DrawerDescription-cjs.js +4 -97
- package/dist/DrawerDescription-es.js +6 -98
- package/dist/MenuSubmenuTrigger-es.js +3 -3
- package/dist/Modal/index.cjs +12 -2
- package/dist/Modal/index.mjs +13 -3
- package/dist/ScrollAreaViewport-cjs.js +2122 -12
- package/dist/ScrollAreaViewport-es.js +2118 -13
- package/dist/dialogReturnFocus-cjs.js +8 -5
- package/dist/dialogReturnFocus-es.js +9 -6
- package/dist/styles.css +66 -10
- package/dist/unstyledPrimitives/index.cjs +218 -2230
- package/dist/unstyledPrimitives/index.mjs +224 -2236
- package/dist/useButton-es.js +1 -1
- package/dist/useScrollLock-es.js +2 -2
- package/package.json +2 -2
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { E as EMPTY_OBJECT, f as formatErrorMessage, u as useRenderElement } from './useRenderElement-es.js';
|
|
3
|
-
import { b as FloatingRootStore, P as PopupTriggerMap, t as createSelector, E as FloatingPortal, I as InternalBackdrop, G as inertValue,
|
|
4
|
-
import { d as createChangeEventDetails, i as imperativeAction, g as getTarget, q as contains,
|
|
2
|
+
import { E as EMPTY_OBJECT, f as formatErrorMessage, u as useRenderElement, m as mergeProps } from './useRenderElement-es.js';
|
|
3
|
+
import { b as FloatingRootStore, P as PopupTriggerMap, t as createSelector, E as FloatingPortal, I as InternalBackdrop, G as inertValue, ag as usePopupRootSync, _ as useImplicitActiveTrigger, $ as useOpenStateTransitions, y as useDismiss, s as useScrollLock, a4 as usePopupInteractionProps, V as ReactStore, a1 as setPopupOpenState, ah as usePopupStore, z as useOnFirstRender, C as CommonPopupDataAttributes, p as popupStateMapping, ab as useTriggerDataForwarding, x as useClick, ai as useOpenMethodTriggerProps, aj as CLICK_TRIGGER_IDENTIFIER, af as triggerOpenStateMapping, F as FOCUSABLE_POPUP_PROPS, a as FloatingFocusManager, ak as BASE_UI_SWIPE_IGNORE_SELECTOR, r as useDirection, J as webkit } from './useScrollLock-es.js';
|
|
4
|
+
import { d as createChangeEventDetails, i as imperativeAction, g as getTarget, q as contains, t as transitionStatusMapping, u as useBaseUiId, c as useButton, b as useStableCallback, o as ownerDocument, a as useIsoLayoutEffect, S as SafeReact, j as error, f as useOpenChangeComplete, z as useControlled, C as none, l as useId, a3 as android, B as addEventListener, a4 as closeWatcher, n as useAnimationFrame, p as activeElement, a5 as TransitionStatusDataAttributes, a6 as swipe, h as useTimeout } from './useButton-es.js';
|
|
5
5
|
import { C as COMPOSITE_KEYS, u as useCSPContext, s as styleDisableScrollbar, n as normalizeScrollOffset } from './scrollEdges-es.js';
|
|
6
|
-
import { c as clamp } from './clamp-es.js';
|
|
7
6
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
8
|
-
import { o as getWindow } from './floating-ui.utils.dom-es.js';
|
|
7
|
+
import { o as getWindow, i as isHTMLElement, d as isLastTraversableNode, e as getParentNode, f as getComputedStyle$1, b as isElement } from './floating-ui.utils.dom-es.js';
|
|
8
|
+
import * as ReactDOM from 'react-dom';
|
|
9
|
+
import { c as clamp } from './clamp-es.js';
|
|
9
10
|
|
|
10
11
|
function getEmptyRootContext() {
|
|
11
12
|
return new FloatingRootStore({
|
|
@@ -439,6 +440,98 @@ function DialogRoot(props) {
|
|
|
439
440
|
return useRenderDialogRoot(props, mode);
|
|
440
441
|
}
|
|
441
442
|
|
|
443
|
+
let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
|
|
444
|
+
/**
|
|
445
|
+
* Present when the dialog is open.
|
|
446
|
+
*/
|
|
447
|
+
DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
|
|
448
|
+
/**
|
|
449
|
+
* Present when the dialog is closed.
|
|
450
|
+
*/
|
|
451
|
+
DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
|
|
452
|
+
/**
|
|
453
|
+
* Present when the dialog is animating in.
|
|
454
|
+
*/
|
|
455
|
+
DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
|
|
456
|
+
/**
|
|
457
|
+
* Present when the dialog is animating out.
|
|
458
|
+
*/
|
|
459
|
+
DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
|
|
460
|
+
/**
|
|
461
|
+
* Present when the dialog is nested within another dialog.
|
|
462
|
+
*/
|
|
463
|
+
DialogViewportDataAttributes["nested"] = "data-nested";
|
|
464
|
+
/**
|
|
465
|
+
* Present when the dialog has other open dialogs nested within it.
|
|
466
|
+
*/
|
|
467
|
+
DialogViewportDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
|
|
468
|
+
return DialogViewportDataAttributes;
|
|
469
|
+
}({});
|
|
470
|
+
|
|
471
|
+
const stateAttributesMapping$2 = {
|
|
472
|
+
...popupStateMapping,
|
|
473
|
+
...transitionStatusMapping,
|
|
474
|
+
nested(value) {
|
|
475
|
+
return value ? {
|
|
476
|
+
[DialogViewportDataAttributes.nested]: ''
|
|
477
|
+
} : null;
|
|
478
|
+
},
|
|
479
|
+
nestedDialogOpen(value) {
|
|
480
|
+
return value ? {
|
|
481
|
+
[DialogViewportDataAttributes.nestedDialogOpen]: ''
|
|
482
|
+
} : null;
|
|
483
|
+
}
|
|
484
|
+
};
|
|
485
|
+
|
|
486
|
+
/**
|
|
487
|
+
* A positioning container for the dialog popup that can be made scrollable.
|
|
488
|
+
* Renders a `<div>` element.
|
|
489
|
+
*
|
|
490
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
491
|
+
*/
|
|
492
|
+
const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(componentProps, forwardedRef) {
|
|
493
|
+
const {
|
|
494
|
+
render,
|
|
495
|
+
className,
|
|
496
|
+
style,
|
|
497
|
+
children,
|
|
498
|
+
...elementProps
|
|
499
|
+
} = componentProps;
|
|
500
|
+
const keepMounted = useDialogPortalContext();
|
|
501
|
+
const {
|
|
502
|
+
store
|
|
503
|
+
} = useDialogRootContext();
|
|
504
|
+
const open = store.useState('open');
|
|
505
|
+
const nested = store.useState('nested');
|
|
506
|
+
const transitionStatus = store.useState('transitionStatus');
|
|
507
|
+
const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
|
|
508
|
+
const mounted = store.useState('mounted');
|
|
509
|
+
const setViewportElement = store.useStateSetter('viewportElement');
|
|
510
|
+
const nestedDialogOpen = nestedOpenDialogCount > 0;
|
|
511
|
+
const state = {
|
|
512
|
+
open,
|
|
513
|
+
nested,
|
|
514
|
+
transitionStatus,
|
|
515
|
+
nestedDialogOpen
|
|
516
|
+
};
|
|
517
|
+
const shouldRender = keepMounted || mounted;
|
|
518
|
+
return useRenderElement('div', componentProps, {
|
|
519
|
+
enabled: shouldRender,
|
|
520
|
+
state,
|
|
521
|
+
ref: [forwardedRef, setViewportElement],
|
|
522
|
+
stateAttributesMapping: stateAttributesMapping$2,
|
|
523
|
+
props: [{
|
|
524
|
+
role: 'presentation',
|
|
525
|
+
hidden: !mounted,
|
|
526
|
+
style: {
|
|
527
|
+
pointerEvents: !open ? 'none' : undefined
|
|
528
|
+
},
|
|
529
|
+
children
|
|
530
|
+
}, elementProps]
|
|
531
|
+
});
|
|
532
|
+
});
|
|
533
|
+
if (process.env.NODE_ENV !== "production") DialogViewport.displayName = "DialogViewport";
|
|
534
|
+
|
|
442
535
|
/**
|
|
443
536
|
* A button that opens the dialog.
|
|
444
537
|
* Renders a `<button>` element.
|
|
@@ -1412,13 +1505,2025 @@ function DrawerProviderReporter() {
|
|
|
1412
1505
|
return null;
|
|
1413
1506
|
}
|
|
1414
1507
|
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
const
|
|
1508
|
+
function isScrollable(element, axis,
|
|
1509
|
+
// When true, a container that overflows only once extra space is added (e.g. drawer
|
|
1510
|
+
// keyboard scroll slack) still counts, as long as it has layout size on the axis.
|
|
1511
|
+
allowOverflowIntent = false) {
|
|
1512
|
+
const style = getComputedStyle$1(element);
|
|
1513
|
+
if (axis === 'vertical') {
|
|
1514
|
+
const overflowY = style.overflowY;
|
|
1515
|
+
if (overflowY !== 'auto' && overflowY !== 'scroll') {
|
|
1516
|
+
return false;
|
|
1517
|
+
}
|
|
1518
|
+
return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
|
|
1519
|
+
}
|
|
1520
|
+
const overflowX = style.overflowX;
|
|
1521
|
+
if (overflowX !== 'auto' && overflowX !== 'scroll') {
|
|
1522
|
+
return false;
|
|
1523
|
+
}
|
|
1524
|
+
return allowOverflowIntent ? element.clientWidth > 0 : element.scrollWidth > element.clientWidth;
|
|
1525
|
+
}
|
|
1526
|
+
function hasScrollableAncestor(target, root, axes) {
|
|
1527
|
+
// `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
|
|
1528
|
+
// still walks up to scrollable ancestors in the light DOM.
|
|
1529
|
+
let node = target;
|
|
1530
|
+
while (isHTMLElement(node) && node !== root && !isLastTraversableNode(node)) {
|
|
1531
|
+
for (const axis of axes) {
|
|
1532
|
+
if (isScrollable(node, axis)) {
|
|
1533
|
+
return true;
|
|
1534
|
+
}
|
|
1535
|
+
}
|
|
1536
|
+
node = getParentNode(node);
|
|
1537
|
+
}
|
|
1538
|
+
return false;
|
|
1539
|
+
}
|
|
1540
|
+
function findScrollableTouchTarget(target, root, axis = 'vertical', allowOverflowIntent = false) {
|
|
1541
|
+
// `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
|
|
1542
|
+
// still reaches a scrollable ancestor in the light DOM.
|
|
1543
|
+
let node = isHTMLElement(target) ? target : null;
|
|
1544
|
+
while (isHTMLElement(node) && node !== root && !isLastTraversableNode(node)) {
|
|
1545
|
+
if (isScrollable(node, axis, allowOverflowIntent)) {
|
|
1546
|
+
return node;
|
|
1547
|
+
}
|
|
1548
|
+
node = getParentNode(node);
|
|
1549
|
+
}
|
|
1550
|
+
return isScrollable(root, axis, allowOverflowIntent) ? root : null;
|
|
1551
|
+
}
|
|
1552
|
+
|
|
1553
|
+
function getElementAtPoint(doc, x, y) {
|
|
1554
|
+
return typeof doc?.elementFromPoint === 'function' ? doc.elementFromPoint(x, y) : null;
|
|
1555
|
+
}
|
|
1556
|
+
|
|
1557
|
+
const DEFAULT_SWIPE_THRESHOLD = 40;
|
|
1558
|
+
const REVERSE_CANCEL_THRESHOLD = 10;
|
|
1559
|
+
const MIN_DRAG_THRESHOLD = 1;
|
|
1560
|
+
const MIN_VELOCITY_DURATION_MS = 50;
|
|
1561
|
+
const MIN_RELEASE_VELOCITY_DURATION_MS = 16;
|
|
1562
|
+
const MAX_RELEASE_VELOCITY_AGE_MS = 80;
|
|
1563
|
+
const DEFAULT_IGNORE_SELECTOR = 'button,a,input,select,textarea,label,[role="button"]';
|
|
1564
|
+
function getDisplacement(direction, deltaX, deltaY) {
|
|
1565
|
+
switch (direction) {
|
|
1566
|
+
case 'up':
|
|
1567
|
+
return -deltaY;
|
|
1568
|
+
case 'down':
|
|
1569
|
+
return deltaY;
|
|
1570
|
+
case 'left':
|
|
1571
|
+
return -deltaX;
|
|
1572
|
+
case 'right':
|
|
1573
|
+
return deltaX;
|
|
1574
|
+
default:
|
|
1575
|
+
return 0;
|
|
1576
|
+
}
|
|
1577
|
+
}
|
|
1578
|
+
function getElementTransform(element) {
|
|
1579
|
+
const computedStyle = getWindow(element).getComputedStyle(element);
|
|
1580
|
+
const transform = computedStyle.transform;
|
|
1581
|
+
let translateX = 0;
|
|
1582
|
+
let translateY = 0;
|
|
1583
|
+
let scale = 1;
|
|
1584
|
+
if (transform && transform !== 'none') {
|
|
1585
|
+
const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
|
|
1586
|
+
if (matrix) {
|
|
1587
|
+
const values = matrix[1].split(', ').map(parseFloat);
|
|
1588
|
+
if (values.length === 6) {
|
|
1589
|
+
translateX = values[4];
|
|
1590
|
+
translateY = values[5];
|
|
1591
|
+
scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
|
|
1592
|
+
} else if (values.length === 16) {
|
|
1593
|
+
translateX = values[12];
|
|
1594
|
+
translateY = values[13];
|
|
1595
|
+
scale = values[0];
|
|
1596
|
+
}
|
|
1597
|
+
}
|
|
1598
|
+
}
|
|
1599
|
+
return {
|
|
1600
|
+
x: translateX,
|
|
1601
|
+
y: translateY,
|
|
1602
|
+
scale
|
|
1603
|
+
};
|
|
1604
|
+
}
|
|
1605
|
+
function getValidTimeStamp(timeStamp) {
|
|
1606
|
+
return Number.isFinite(timeStamp) && timeStamp > 0 ? timeStamp : null;
|
|
1607
|
+
}
|
|
1608
|
+
function getDragTransform(dragOffset, scale) {
|
|
1609
|
+
return `translate3d(${dragOffset.x}px,${dragOffset.y}px,0) scale(${scale})`;
|
|
1610
|
+
}
|
|
1611
|
+
function hasPrimaryMouseButton(buttons) {
|
|
1612
|
+
return buttons % 2 === 1;
|
|
1613
|
+
}
|
|
1614
|
+
function safelyChangePointerCapture(element, pointerId, method) {
|
|
1615
|
+
const pointerCaptureMethod = element[method];
|
|
1616
|
+
if (typeof pointerCaptureMethod !== 'function') {
|
|
1617
|
+
return;
|
|
1618
|
+
}
|
|
1619
|
+
try {
|
|
1620
|
+
pointerCaptureMethod.call(element, pointerId);
|
|
1621
|
+
} catch (error) {
|
|
1622
|
+
if (error && typeof error === 'object' && 'name' in error && error.name === 'NotFoundError') {
|
|
1623
|
+
return;
|
|
1624
|
+
}
|
|
1625
|
+
throw error;
|
|
1626
|
+
}
|
|
1627
|
+
}
|
|
1628
|
+
function useSwipeDismiss(options) {
|
|
1629
|
+
const {
|
|
1630
|
+
enabled,
|
|
1631
|
+
directions,
|
|
1632
|
+
elementRef,
|
|
1633
|
+
movementCssVars,
|
|
1634
|
+
canStart,
|
|
1635
|
+
ignoreSelectorWhenTouch = true,
|
|
1636
|
+
ignoreScrollableAncestors = false,
|
|
1637
|
+
swipeThreshold: swipeThresholdProp,
|
|
1638
|
+
onDismiss,
|
|
1639
|
+
onProgress,
|
|
1640
|
+
onCancel,
|
|
1641
|
+
onSwipeStart,
|
|
1642
|
+
onRelease,
|
|
1643
|
+
onSwipingChange,
|
|
1644
|
+
trackDrag = true
|
|
1645
|
+
} = options;
|
|
1646
|
+
const ignoreSelector = DEFAULT_IGNORE_SELECTOR;
|
|
1647
|
+
const primaryDirection = directions.length === 1 ? directions[0] : undefined;
|
|
1648
|
+
const swipeThresholdDefault = Math.max(0, typeof swipeThresholdProp === 'number' ? swipeThresholdProp : DEFAULT_SWIPE_THRESHOLD);
|
|
1649
|
+
const allowLeft = directions.includes('left');
|
|
1650
|
+
const allowRight = directions.includes('right');
|
|
1651
|
+
const allowUp = directions.includes('up');
|
|
1652
|
+
const allowDown = directions.includes('down');
|
|
1653
|
+
const hasHorizontal = allowLeft || allowRight;
|
|
1654
|
+
const hasVertical = allowUp || allowDown;
|
|
1655
|
+
const scrollAxes = React.useMemo(() => {
|
|
1656
|
+
const axes = [];
|
|
1657
|
+
if (hasVertical) {
|
|
1658
|
+
axes.push('vertical');
|
|
1659
|
+
}
|
|
1660
|
+
if (hasHorizontal) {
|
|
1661
|
+
axes.push('horizontal');
|
|
1662
|
+
}
|
|
1663
|
+
return axes;
|
|
1664
|
+
}, [hasHorizontal, hasVertical]);
|
|
1665
|
+
const [currentSwipeDirection, setCurrentSwipeDirection] = React.useState(undefined);
|
|
1666
|
+
const [isSwiping, setIsSwiping] = React.useState(false);
|
|
1667
|
+
const [dragDismissed, setDragDismissed] = React.useState(false);
|
|
1668
|
+
const dragStartPosRef = React.useRef({
|
|
1669
|
+
x: 0,
|
|
1670
|
+
y: 0
|
|
1671
|
+
});
|
|
1672
|
+
const dragOffsetRef = React.useRef({
|
|
1673
|
+
x: 0,
|
|
1674
|
+
y: 0
|
|
1675
|
+
});
|
|
1676
|
+
const lastMovePosRef = React.useRef(null);
|
|
1677
|
+
const initialTransformRef = React.useRef({
|
|
1678
|
+
x: 0,
|
|
1679
|
+
y: 0,
|
|
1680
|
+
scale: 1
|
|
1681
|
+
});
|
|
1682
|
+
const intendedSwipeDirectionRef = React.useRef(undefined);
|
|
1683
|
+
const maxSwipeDisplacementRef = React.useRef(0);
|
|
1684
|
+
const cancelledSwipeRef = React.useRef(false);
|
|
1685
|
+
const swipeCancelBaselineRef = React.useRef({
|
|
1686
|
+
x: 0,
|
|
1687
|
+
y: 0
|
|
1688
|
+
});
|
|
1689
|
+
const lockedDirectionRef = React.useRef(null);
|
|
1690
|
+
const isFirstPointerMoveRef = React.useRef(false);
|
|
1691
|
+
const pendingSwipeRef = React.useRef(false);
|
|
1692
|
+
const pendingSwipeStartPosRef = React.useRef(null);
|
|
1693
|
+
const swipeFromScrollableRef = React.useRef(false);
|
|
1694
|
+
const sawPrimaryButtonsOnMoveRef = React.useRef(false);
|
|
1695
|
+
const elementSizeRef = React.useRef({
|
|
1696
|
+
width: 0,
|
|
1697
|
+
height: 0
|
|
1698
|
+
});
|
|
1699
|
+
const swipeProgressRef = React.useRef(0);
|
|
1700
|
+
const swipeThresholdRef = React.useRef(swipeThresholdDefault);
|
|
1701
|
+
const swipeStartTimeRef = React.useRef(null);
|
|
1702
|
+
const lastDragSampleRef = React.useRef(null);
|
|
1703
|
+
const lastDragVelocityRef = React.useRef({
|
|
1704
|
+
x: 0,
|
|
1705
|
+
y: 0
|
|
1706
|
+
});
|
|
1707
|
+
const lastProgressDetailsRef = React.useRef(null);
|
|
1708
|
+
const isSwipingRef = React.useRef(false);
|
|
1709
|
+
const dragStyleSnapshotRef = React.useRef(null);
|
|
1710
|
+
const setSwiping = useStableCallback(nextSwiping => {
|
|
1711
|
+
if (isSwipingRef.current === nextSwiping) {
|
|
1712
|
+
return;
|
|
1713
|
+
}
|
|
1714
|
+
isSwipingRef.current = nextSwiping;
|
|
1715
|
+
setIsSwiping(nextSwiping);
|
|
1716
|
+
onSwipingChange?.(nextSwiping);
|
|
1717
|
+
});
|
|
1718
|
+
function resolveSwipeThreshold(direction) {
|
|
1719
|
+
if (!direction) {
|
|
1720
|
+
return;
|
|
1721
|
+
}
|
|
1722
|
+
if (typeof swipeThresholdProp !== 'function') {
|
|
1723
|
+
swipeThresholdRef.current = swipeThresholdDefault;
|
|
1724
|
+
return;
|
|
1725
|
+
}
|
|
1726
|
+
const element = elementRef.current;
|
|
1727
|
+
if (!element) {
|
|
1728
|
+
return;
|
|
1729
|
+
}
|
|
1730
|
+
const value = swipeThresholdProp({
|
|
1731
|
+
element,
|
|
1732
|
+
direction
|
|
1733
|
+
});
|
|
1734
|
+
swipeThresholdRef.current = Math.max(0, value);
|
|
1735
|
+
}
|
|
1736
|
+
const updateSwipeProgress = useStableCallback((progress, details) => {
|
|
1737
|
+
const nextProgress = Number.isFinite(progress) ? clamp(progress, 0, 1) : 0;
|
|
1738
|
+
const progressChanged = nextProgress !== swipeProgressRef.current;
|
|
1739
|
+
let detailsChanged = false;
|
|
1740
|
+
if (details) {
|
|
1741
|
+
const lastDetails = lastProgressDetailsRef.current;
|
|
1742
|
+
detailsChanged = !lastDetails || lastDetails.deltaX !== details.deltaX || lastDetails.deltaY !== details.deltaY || lastDetails.direction !== details.direction;
|
|
1743
|
+
}
|
|
1744
|
+
if (!progressChanged && !detailsChanged) {
|
|
1745
|
+
return;
|
|
1746
|
+
}
|
|
1747
|
+
swipeProgressRef.current = nextProgress;
|
|
1748
|
+
if (details) {
|
|
1749
|
+
lastProgressDetailsRef.current = details;
|
|
1750
|
+
} else if (progressChanged) {
|
|
1751
|
+
lastProgressDetailsRef.current = null;
|
|
1752
|
+
}
|
|
1753
|
+
onProgress?.(nextProgress, details);
|
|
1754
|
+
});
|
|
1755
|
+
const syncDragStyles = useStableCallback(swiping => {
|
|
1756
|
+
const element = elementRef.current;
|
|
1757
|
+
if (!trackDrag || !element) {
|
|
1758
|
+
if (!swiping) {
|
|
1759
|
+
dragStyleSnapshotRef.current = null;
|
|
1760
|
+
}
|
|
1761
|
+
return;
|
|
1762
|
+
}
|
|
1763
|
+
const style = element.style;
|
|
1764
|
+
const dragStyleSnapshot = dragStyleSnapshotRef.current;
|
|
1765
|
+
if (swiping) {
|
|
1766
|
+
if (!dragStyleSnapshot) {
|
|
1767
|
+
dragStyleSnapshotRef.current = [style.transition, style.transform];
|
|
1768
|
+
}
|
|
1769
|
+
style.transition = 'none';
|
|
1770
|
+
} else if (dragStyleSnapshot) {
|
|
1771
|
+
[style.transition, style.transform] = dragStyleSnapshot;
|
|
1772
|
+
dragStyleSnapshotRef.current = null;
|
|
1773
|
+
}
|
|
1774
|
+
const dragOffset = dragOffsetRef.current;
|
|
1775
|
+
const initialTransform = initialTransformRef.current;
|
|
1776
|
+
const deltaX = dragOffset.x - initialTransform.x;
|
|
1777
|
+
const deltaY = dragOffset.y - initialTransform.y;
|
|
1778
|
+
if (swiping) {
|
|
1779
|
+
style.transform = getDragTransform(dragOffset, initialTransform.scale);
|
|
1780
|
+
}
|
|
1781
|
+
style.setProperty(movementCssVars.x, `${deltaX}px`);
|
|
1782
|
+
style.setProperty(movementCssVars.y, `${deltaY}px`);
|
|
1783
|
+
});
|
|
1784
|
+
function recordDragSample(offset, timeStamp) {
|
|
1785
|
+
if (timeStamp === null) {
|
|
1786
|
+
return;
|
|
1787
|
+
}
|
|
1788
|
+
const lastSample = lastDragSampleRef.current;
|
|
1789
|
+
if (lastSample && timeStamp > lastSample.time) {
|
|
1790
|
+
const durationMs = Math.max(timeStamp - lastSample.time, MIN_RELEASE_VELOCITY_DURATION_MS);
|
|
1791
|
+
lastDragVelocityRef.current = {
|
|
1792
|
+
x: (offset.x - lastSample.x) / durationMs,
|
|
1793
|
+
y: (offset.y - lastSample.y) / durationMs
|
|
1794
|
+
};
|
|
1795
|
+
}
|
|
1796
|
+
lastDragSampleRef.current = {
|
|
1797
|
+
x: offset.x,
|
|
1798
|
+
y: offset.y,
|
|
1799
|
+
time: timeStamp
|
|
1800
|
+
};
|
|
1801
|
+
}
|
|
1802
|
+
const reset = React.useCallback(() => {
|
|
1803
|
+
setCurrentSwipeDirection(undefined);
|
|
1804
|
+
setSwiping(false);
|
|
1805
|
+
setDragDismissed(false);
|
|
1806
|
+
updateSwipeProgress(0);
|
|
1807
|
+
swipeThresholdRef.current = swipeThresholdDefault;
|
|
1808
|
+
dragStartPosRef.current = {
|
|
1809
|
+
x: 0,
|
|
1810
|
+
y: 0
|
|
1811
|
+
};
|
|
1812
|
+
dragOffsetRef.current = {
|
|
1813
|
+
x: 0,
|
|
1814
|
+
y: 0
|
|
1815
|
+
};
|
|
1816
|
+
initialTransformRef.current = {
|
|
1817
|
+
x: 0,
|
|
1818
|
+
y: 0,
|
|
1819
|
+
scale: 1
|
|
1820
|
+
};
|
|
1821
|
+
intendedSwipeDirectionRef.current = undefined;
|
|
1822
|
+
maxSwipeDisplacementRef.current = 0;
|
|
1823
|
+
cancelledSwipeRef.current = false;
|
|
1824
|
+
swipeCancelBaselineRef.current = {
|
|
1825
|
+
x: 0,
|
|
1826
|
+
y: 0
|
|
1827
|
+
};
|
|
1828
|
+
lockedDirectionRef.current = null;
|
|
1829
|
+
isFirstPointerMoveRef.current = false;
|
|
1830
|
+
lastMovePosRef.current = null;
|
|
1831
|
+
pendingSwipeRef.current = false;
|
|
1832
|
+
pendingSwipeStartPosRef.current = null;
|
|
1833
|
+
swipeFromScrollableRef.current = false;
|
|
1834
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
1835
|
+
elementSizeRef.current = {
|
|
1836
|
+
width: 0,
|
|
1837
|
+
height: 0
|
|
1838
|
+
};
|
|
1839
|
+
swipeStartTimeRef.current = null;
|
|
1840
|
+
lastDragSampleRef.current = null;
|
|
1841
|
+
lastDragVelocityRef.current = {
|
|
1842
|
+
x: 0,
|
|
1843
|
+
y: 0
|
|
1844
|
+
};
|
|
1845
|
+
lastProgressDetailsRef.current = null;
|
|
1846
|
+
syncDragStyles(false);
|
|
1847
|
+
}, [setSwiping, swipeThresholdDefault, syncDragStyles, updateSwipeProgress]);
|
|
1848
|
+
React.useEffect(() => {
|
|
1849
|
+
if (typeof swipeThresholdProp !== 'function') {
|
|
1850
|
+
swipeThresholdRef.current = swipeThresholdDefault;
|
|
1851
|
+
}
|
|
1852
|
+
}, [swipeThresholdDefault, swipeThresholdProp]);
|
|
1853
|
+
function getPrimaryPointerPosition(event) {
|
|
1854
|
+
if ('touches' in event) {
|
|
1855
|
+
const touch = event.touches[0];
|
|
1856
|
+
return touch ? {
|
|
1857
|
+
x: touch.clientX,
|
|
1858
|
+
y: touch.clientY
|
|
1859
|
+
} : null;
|
|
1860
|
+
}
|
|
1861
|
+
return {
|
|
1862
|
+
x: event.clientX,
|
|
1863
|
+
y: event.clientY
|
|
1864
|
+
};
|
|
1865
|
+
}
|
|
1866
|
+
function isTouchLikeEvent(event) {
|
|
1867
|
+
if ('touches' in event) {
|
|
1868
|
+
return true;
|
|
1869
|
+
}
|
|
1870
|
+
return event.pointerType === 'touch';
|
|
1871
|
+
}
|
|
1872
|
+
function getTargetAtPoint(position, nativeEvent) {
|
|
1873
|
+
const doc = ownerDocument(elementRef.current);
|
|
1874
|
+
const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
|
|
1875
|
+
const target = elementAtPoint ?? getTarget(nativeEvent);
|
|
1876
|
+
return target;
|
|
1877
|
+
}
|
|
1878
|
+
function findGestureScrollableTouchTarget(target, root) {
|
|
1879
|
+
if (hasHorizontal && !hasVertical) {
|
|
1880
|
+
return findScrollableTouchTarget(target, root, 'horizontal');
|
|
1881
|
+
}
|
|
1882
|
+
if (hasVertical && !hasHorizontal) {
|
|
1883
|
+
return findScrollableTouchTarget(target, root, 'vertical');
|
|
1884
|
+
}
|
|
1885
|
+
return findScrollableTouchTarget(target, root, 'vertical') ?? findScrollableTouchTarget(target, root, 'horizontal');
|
|
1886
|
+
}
|
|
1887
|
+
function startSwipeAtPosition(event, position, startOptions) {
|
|
1888
|
+
swipeFromScrollableRef.current = false;
|
|
1889
|
+
const touchLike = isTouchLikeEvent(event);
|
|
1890
|
+
const target = getTargetAtPoint(position, event.nativeEvent);
|
|
1891
|
+
const doc = ownerDocument(elementRef.current);
|
|
1892
|
+
const body = doc.body;
|
|
1893
|
+
const scrollableTarget = touchLike && body ? findGestureScrollableTouchTarget(target, body) : null;
|
|
1894
|
+
const ignoreScrollableTarget = startOptions?.ignoreScrollableTarget ?? false;
|
|
1895
|
+
if (scrollableTarget && !ignoreScrollableTarget) {
|
|
1896
|
+
return false;
|
|
1897
|
+
}
|
|
1898
|
+
swipeFromScrollableRef.current = Boolean(scrollableTarget && ignoreScrollableTarget);
|
|
1899
|
+
const isInteractiveElement = target ? target.closest(ignoreSelector) : false;
|
|
1900
|
+
if (isInteractiveElement && (!touchLike || ignoreSelectorWhenTouch)) {
|
|
1901
|
+
return false;
|
|
1902
|
+
}
|
|
1903
|
+
const element = elementRef.current;
|
|
1904
|
+
if (ignoreScrollableAncestors && element && target && scrollAxes.length > 0) {
|
|
1905
|
+
const ignoreAncestors = startOptions?.ignoreScrollableAncestors ?? false;
|
|
1906
|
+
if (!ignoreAncestors && hasScrollableAncestor(target, element, scrollAxes)) {
|
|
1907
|
+
return false;
|
|
1908
|
+
}
|
|
1909
|
+
}
|
|
1910
|
+
cancelledSwipeRef.current = false;
|
|
1911
|
+
intendedSwipeDirectionRef.current = undefined;
|
|
1912
|
+
maxSwipeDisplacementRef.current = 0;
|
|
1913
|
+
dragStartPosRef.current = position;
|
|
1914
|
+
swipeStartTimeRef.current = getValidTimeStamp(event.timeStamp);
|
|
1915
|
+
swipeCancelBaselineRef.current = position;
|
|
1916
|
+
lastMovePosRef.current = position;
|
|
1917
|
+
if (element) {
|
|
1918
|
+
elementSizeRef.current = {
|
|
1919
|
+
width: element.offsetWidth,
|
|
1920
|
+
height: element.offsetHeight
|
|
1921
|
+
};
|
|
1922
|
+
resolveSwipeThreshold(primaryDirection);
|
|
1923
|
+
const transform = getElementTransform(element);
|
|
1924
|
+
initialTransformRef.current = transform;
|
|
1925
|
+
dragOffsetRef.current = {
|
|
1926
|
+
x: transform.x,
|
|
1927
|
+
y: transform.y
|
|
1928
|
+
};
|
|
1929
|
+
recordDragSample({
|
|
1930
|
+
x: transform.x,
|
|
1931
|
+
y: transform.y
|
|
1932
|
+
}, swipeStartTimeRef.current);
|
|
1933
|
+
if (!('touches' in event)) {
|
|
1934
|
+
safelyChangePointerCapture(element, event.pointerId, 'setPointerCapture');
|
|
1935
|
+
}
|
|
1936
|
+
}
|
|
1937
|
+
onSwipeStart?.(event.nativeEvent);
|
|
1938
|
+
setSwiping(true);
|
|
1939
|
+
lockedDirectionRef.current = null;
|
|
1940
|
+
isFirstPointerMoveRef.current = true;
|
|
1941
|
+
updateSwipeProgress(0);
|
|
1942
|
+
syncDragStyles(true);
|
|
1943
|
+
return true;
|
|
1944
|
+
}
|
|
1945
|
+
function resetPendingSwipeState() {
|
|
1946
|
+
clearPendingSwipeStartState();
|
|
1947
|
+
swipeFromScrollableRef.current = false;
|
|
1948
|
+
lastMovePosRef.current = null;
|
|
1949
|
+
}
|
|
1950
|
+
function clearPendingSwipeStartState() {
|
|
1951
|
+
pendingSwipeRef.current = false;
|
|
1952
|
+
pendingSwipeStartPosRef.current = null;
|
|
1953
|
+
}
|
|
1954
|
+
function cancelSwipeInteraction(event) {
|
|
1955
|
+
resetPendingSwipeState();
|
|
1956
|
+
if (!isSwipingRef.current) {
|
|
1957
|
+
return;
|
|
1958
|
+
}
|
|
1959
|
+
setSwiping(false);
|
|
1960
|
+
lockedDirectionRef.current = null;
|
|
1961
|
+
const resolvedInitialTransform = initialTransformRef.current;
|
|
1962
|
+
dragOffsetRef.current = {
|
|
1963
|
+
x: resolvedInitialTransform.x,
|
|
1964
|
+
y: resolvedInitialTransform.y
|
|
1965
|
+
};
|
|
1966
|
+
setCurrentSwipeDirection(undefined);
|
|
1967
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
1968
|
+
syncDragStyles(false);
|
|
1969
|
+
const element = elementRef.current;
|
|
1970
|
+
if (element) {
|
|
1971
|
+
safelyChangePointerCapture(element, event.pointerId, 'releasePointerCapture');
|
|
1972
|
+
}
|
|
1973
|
+
updateSwipeProgress(0, {
|
|
1974
|
+
deltaX: 0,
|
|
1975
|
+
deltaY: 0,
|
|
1976
|
+
direction: undefined
|
|
1977
|
+
});
|
|
1978
|
+
onCancel?.(event.nativeEvent);
|
|
1979
|
+
}
|
|
1980
|
+
function applyDirectionalDamping(deltaX, deltaY) {
|
|
1981
|
+
const exponent = value => value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);
|
|
1982
|
+
const dampAxis = (delta, allowNegative, allowPositive) => {
|
|
1983
|
+
if (!allowNegative && delta < 0) {
|
|
1984
|
+
return exponent(delta);
|
|
1985
|
+
}
|
|
1986
|
+
if (!allowPositive && delta > 0) {
|
|
1987
|
+
return exponent(delta);
|
|
1988
|
+
}
|
|
1989
|
+
return delta;
|
|
1990
|
+
};
|
|
1991
|
+
const newDeltaX = hasHorizontal ? dampAxis(deltaX, allowLeft, allowRight) : exponent(deltaX);
|
|
1992
|
+
const newDeltaY = hasVertical ? dampAxis(deltaY, allowUp, allowDown) : exponent(deltaY);
|
|
1993
|
+
return {
|
|
1994
|
+
x: newDeltaX,
|
|
1995
|
+
y: newDeltaY
|
|
1996
|
+
};
|
|
1997
|
+
}
|
|
1998
|
+
function canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY) {
|
|
1999
|
+
const absDeltaX = Math.abs(deltaX);
|
|
2000
|
+
const absDeltaY = Math.abs(deltaY);
|
|
2001
|
+
const useVerticalAxis = hasVertical && deltaY !== 0 && (!hasHorizontal || absDeltaY >= absDeltaX);
|
|
2002
|
+
if (useVerticalAxis) {
|
|
2003
|
+
const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
|
|
2004
|
+
const atTop = scrollTarget.scrollTop <= 0;
|
|
2005
|
+
const atBottom = scrollTarget.scrollTop >= maxScrollTop;
|
|
2006
|
+
const movingDown = deltaY > 0;
|
|
2007
|
+
const movingUp = deltaY < 0;
|
|
2008
|
+
const canSwipeDown = movingDown && atTop && allowDown;
|
|
2009
|
+
const canSwipeUp = movingUp && atBottom && allowUp;
|
|
2010
|
+
return canSwipeDown || canSwipeUp;
|
|
2011
|
+
}
|
|
2012
|
+
const useHorizontalAxis = hasHorizontal && deltaX !== 0 && (!hasVertical || absDeltaX > absDeltaY);
|
|
2013
|
+
if (useHorizontalAxis) {
|
|
2014
|
+
const maxScrollLeft = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
|
|
2015
|
+
const atLeft = scrollTarget.scrollLeft <= 0;
|
|
2016
|
+
const atRight = scrollTarget.scrollLeft >= maxScrollLeft;
|
|
2017
|
+
const movingRight = deltaX > 0;
|
|
2018
|
+
const movingLeft = deltaX < 0;
|
|
2019
|
+
const canSwipeRight = movingRight && atLeft && allowRight;
|
|
2020
|
+
const canSwipeLeft = movingLeft && atRight && allowLeft;
|
|
2021
|
+
return canSwipeRight || canSwipeLeft;
|
|
2022
|
+
}
|
|
2023
|
+
return null;
|
|
2024
|
+
}
|
|
2025
|
+
const handleStart = useStableCallback(event => {
|
|
2026
|
+
if (!enabled) {
|
|
2027
|
+
return;
|
|
2028
|
+
}
|
|
2029
|
+
if (event.defaultPrevented || event.nativeEvent.defaultPrevented) {
|
|
2030
|
+
return;
|
|
2031
|
+
}
|
|
2032
|
+
if (!('touches' in event) && event.button !== 0) {
|
|
2033
|
+
return;
|
|
2034
|
+
}
|
|
2035
|
+
const startPos = getPrimaryPointerPosition(event);
|
|
2036
|
+
if (!startPos) {
|
|
2037
|
+
return;
|
|
2038
|
+
}
|
|
2039
|
+
pendingSwipeRef.current = true;
|
|
2040
|
+
pendingSwipeStartPosRef.current = startPos;
|
|
2041
|
+
swipeFromScrollableRef.current = false;
|
|
2042
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
2043
|
+
const allowedToStart = canStart ? canStart(startPos, {
|
|
2044
|
+
nativeEvent: event.nativeEvent,
|
|
2045
|
+
direction: primaryDirection
|
|
2046
|
+
}) : true;
|
|
2047
|
+
if (!allowedToStart) {
|
|
2048
|
+
return;
|
|
2049
|
+
}
|
|
2050
|
+
if (startSwipeAtPosition(event, startPos)) {
|
|
2051
|
+
clearPendingSwipeStartState();
|
|
2052
|
+
}
|
|
2053
|
+
});
|
|
2054
|
+
function handleMoveCore(event, position, movement) {
|
|
2055
|
+
if (!enabled || !isSwipingRef.current) {
|
|
2056
|
+
return;
|
|
2057
|
+
}
|
|
2058
|
+
const target = getTarget(event.nativeEvent);
|
|
2059
|
+
if (isTouchLikeEvent(event) && !swipeFromScrollableRef.current) {
|
|
2060
|
+
const boundaryElement = event.currentTarget;
|
|
2061
|
+
if (findGestureScrollableTouchTarget(target, boundaryElement)) {
|
|
2062
|
+
return;
|
|
2063
|
+
}
|
|
2064
|
+
}
|
|
2065
|
+
if (!('touches' in event)) {
|
|
2066
|
+
// Prevent text selection on Safari
|
|
2067
|
+
event.preventDefault();
|
|
2068
|
+
}
|
|
2069
|
+
if (isFirstPointerMoveRef.current) {
|
|
2070
|
+
// Adjust the starting position to the current position on the first move
|
|
2071
|
+
// to account for the delay between pointerdown and the first pointermove on iOS.
|
|
2072
|
+
dragStartPosRef.current = position;
|
|
2073
|
+
const moveTime = getValidTimeStamp(event.timeStamp);
|
|
2074
|
+
if (moveTime !== null) {
|
|
2075
|
+
swipeStartTimeRef.current = moveTime;
|
|
2076
|
+
}
|
|
2077
|
+
isFirstPointerMoveRef.current = false;
|
|
2078
|
+
}
|
|
2079
|
+
const clientX = position.x;
|
|
2080
|
+
const clientY = position.y;
|
|
2081
|
+
const movementX = movement.x;
|
|
2082
|
+
const movementY = movement.y;
|
|
2083
|
+
if (movementY < 0 && clientY > swipeCancelBaselineRef.current.y || movementY > 0 && clientY < swipeCancelBaselineRef.current.y) {
|
|
2084
|
+
swipeCancelBaselineRef.current = {
|
|
2085
|
+
x: swipeCancelBaselineRef.current.x,
|
|
2086
|
+
y: clientY
|
|
2087
|
+
};
|
|
2088
|
+
}
|
|
2089
|
+
if (movementX < 0 && clientX > swipeCancelBaselineRef.current.x || movementX > 0 && clientX < swipeCancelBaselineRef.current.x) {
|
|
2090
|
+
swipeCancelBaselineRef.current = {
|
|
2091
|
+
x: clientX,
|
|
2092
|
+
y: swipeCancelBaselineRef.current.y
|
|
2093
|
+
};
|
|
2094
|
+
}
|
|
2095
|
+
const deltaX = clientX - dragStartPosRef.current.x;
|
|
2096
|
+
const deltaY = clientY - dragStartPosRef.current.y;
|
|
2097
|
+
const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
|
|
2098
|
+
const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
|
|
2099
|
+
let lockedDirection = lockedDirectionRef.current;
|
|
2100
|
+
if (lockedDirection === null && hasHorizontal && hasVertical) {
|
|
2101
|
+
const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
|
2102
|
+
if (movementDistance >= MIN_DRAG_THRESHOLD) {
|
|
2103
|
+
lockedDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'horizontal' : 'vertical';
|
|
2104
|
+
lockedDirectionRef.current = lockedDirection;
|
|
2105
|
+
}
|
|
2106
|
+
}
|
|
2107
|
+
let candidate;
|
|
2108
|
+
if (!intendedSwipeDirectionRef.current) {
|
|
2109
|
+
if (lockedDirection === 'vertical') {
|
|
2110
|
+
if (deltaY > 0) {
|
|
2111
|
+
candidate = 'down';
|
|
2112
|
+
} else if (deltaY < 0) {
|
|
2113
|
+
candidate = 'up';
|
|
2114
|
+
}
|
|
2115
|
+
} else if (lockedDirection === 'horizontal') {
|
|
2116
|
+
if (deltaX > 0) {
|
|
2117
|
+
candidate = 'right';
|
|
2118
|
+
} else if (deltaX < 0) {
|
|
2119
|
+
candidate = 'left';
|
|
2120
|
+
}
|
|
2121
|
+
} else if (Math.abs(deltaX) >= Math.abs(deltaY)) {
|
|
2122
|
+
candidate = deltaX > 0 ? 'right' : 'left';
|
|
2123
|
+
} else {
|
|
2124
|
+
candidate = deltaY > 0 ? 'down' : 'up';
|
|
2125
|
+
}
|
|
2126
|
+
if (candidate) {
|
|
2127
|
+
const isAllowed = candidate === 'left' && allowLeft || candidate === 'right' && allowRight || candidate === 'up' && allowUp || candidate === 'down' && allowDown;
|
|
2128
|
+
if (isAllowed) {
|
|
2129
|
+
intendedSwipeDirectionRef.current = candidate;
|
|
2130
|
+
maxSwipeDisplacementRef.current = getDisplacement(candidate, deltaX, deltaY);
|
|
2131
|
+
setCurrentSwipeDirection(candidate);
|
|
2132
|
+
resolveSwipeThreshold(candidate);
|
|
2133
|
+
}
|
|
2134
|
+
}
|
|
2135
|
+
} else {
|
|
2136
|
+
const direction = intendedSwipeDirectionRef.current;
|
|
2137
|
+
const currentDisplacement = getDisplacement(direction, cancelDeltaX, cancelDeltaY);
|
|
2138
|
+
if (currentDisplacement > swipeThresholdRef.current) {
|
|
2139
|
+
cancelledSwipeRef.current = false;
|
|
2140
|
+
setCurrentSwipeDirection(direction);
|
|
2141
|
+
} else if (!(allowLeft && allowRight) && !(allowUp && allowDown) && maxSwipeDisplacementRef.current - currentDisplacement >= REVERSE_CANCEL_THRESHOLD) {
|
|
2142
|
+
// Mark that a change-of-mind has occurred
|
|
2143
|
+
cancelledSwipeRef.current = true;
|
|
2144
|
+
}
|
|
2145
|
+
}
|
|
2146
|
+
const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
|
|
2147
|
+
let newOffsetX = initialTransformRef.current.x;
|
|
2148
|
+
let newOffsetY = initialTransformRef.current.y;
|
|
2149
|
+
if (lockedDirection === 'horizontal') {
|
|
2150
|
+
if (hasHorizontal) {
|
|
2151
|
+
newOffsetX += dampedDelta.x;
|
|
2152
|
+
}
|
|
2153
|
+
} else if (lockedDirection === 'vertical') {
|
|
2154
|
+
if (hasVertical) {
|
|
2155
|
+
newOffsetY += dampedDelta.y;
|
|
2156
|
+
}
|
|
2157
|
+
} else {
|
|
2158
|
+
if (hasHorizontal) {
|
|
2159
|
+
newOffsetX += dampedDelta.x;
|
|
2160
|
+
}
|
|
2161
|
+
if (hasVertical) {
|
|
2162
|
+
newOffsetY += dampedDelta.y;
|
|
2163
|
+
}
|
|
2164
|
+
}
|
|
2165
|
+
dragOffsetRef.current = {
|
|
2166
|
+
x: newOffsetX,
|
|
2167
|
+
y: newOffsetY
|
|
2168
|
+
};
|
|
2169
|
+
syncDragStyles(true);
|
|
2170
|
+
recordDragSample({
|
|
2171
|
+
x: newOffsetX,
|
|
2172
|
+
y: newOffsetY
|
|
2173
|
+
}, getValidTimeStamp(event.timeStamp));
|
|
2174
|
+
const dragDeltaX = newOffsetX - initialTransformRef.current.x;
|
|
2175
|
+
const dragDeltaY = newOffsetY - initialTransformRef.current.y;
|
|
2176
|
+
const swipeDirectionDetails = intendedSwipeDirectionRef.current;
|
|
2177
|
+
const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
|
|
2178
|
+
if (!progressDirection) {
|
|
2179
|
+
updateSwipeProgress(0, {
|
|
2180
|
+
deltaX: dragDeltaX,
|
|
2181
|
+
deltaY: dragDeltaY,
|
|
2182
|
+
direction: swipeDirectionDetails
|
|
2183
|
+
});
|
|
2184
|
+
return;
|
|
2185
|
+
}
|
|
2186
|
+
const size = progressDirection === 'left' || progressDirection === 'right' ? elementSizeRef.current.width : elementSizeRef.current.height;
|
|
2187
|
+
const scale = initialTransformRef.current.scale || 1;
|
|
2188
|
+
if (size <= 0 || scale <= 0) {
|
|
2189
|
+
updateSwipeProgress(0, {
|
|
2190
|
+
deltaX: dragDeltaX,
|
|
2191
|
+
deltaY: dragDeltaY,
|
|
2192
|
+
direction: swipeDirectionDetails
|
|
2193
|
+
});
|
|
2194
|
+
return;
|
|
2195
|
+
}
|
|
2196
|
+
const progressDisplacement = getDisplacement(progressDirection, newOffsetX - initialTransformRef.current.x, newOffsetY - initialTransformRef.current.y);
|
|
2197
|
+
if (progressDisplacement <= 0) {
|
|
2198
|
+
updateSwipeProgress(0, {
|
|
2199
|
+
deltaX: dragDeltaX,
|
|
2200
|
+
deltaY: dragDeltaY,
|
|
2201
|
+
direction: swipeDirectionDetails
|
|
2202
|
+
});
|
|
2203
|
+
return;
|
|
2204
|
+
}
|
|
2205
|
+
updateSwipeProgress(progressDisplacement / (size * scale), {
|
|
2206
|
+
deltaX: dragDeltaX,
|
|
2207
|
+
deltaY: dragDeltaY,
|
|
2208
|
+
direction: swipeDirectionDetails
|
|
2209
|
+
});
|
|
2210
|
+
}
|
|
2211
|
+
const handleEnd = useStableCallback(event => {
|
|
2212
|
+
if (!enabled) {
|
|
2213
|
+
return;
|
|
2214
|
+
}
|
|
2215
|
+
const resolvedDragOffset = dragOffsetRef.current;
|
|
2216
|
+
const resolvedInitialTransform = initialTransformRef.current;
|
|
2217
|
+
const releaseDeltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
|
|
2218
|
+
const releaseDeltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
|
|
2219
|
+
const progressDetails = {
|
|
2220
|
+
deltaX: releaseDeltaX,
|
|
2221
|
+
deltaY: releaseDeltaY,
|
|
2222
|
+
direction: intendedSwipeDirectionRef.current
|
|
2223
|
+
};
|
|
2224
|
+
if (!isSwipingRef.current) {
|
|
2225
|
+
resetPendingSwipeState();
|
|
2226
|
+
updateSwipeProgress(0, progressDetails);
|
|
2227
|
+
return;
|
|
2228
|
+
}
|
|
2229
|
+
setSwiping(false);
|
|
2230
|
+
lockedDirectionRef.current = null;
|
|
2231
|
+
resetPendingSwipeState();
|
|
2232
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
2233
|
+
const element = elementRef.current;
|
|
2234
|
+
if (element) {
|
|
2235
|
+
if (!('touches' in event)) {
|
|
2236
|
+
safelyChangePointerCapture(element, event.pointerId, 'releasePointerCapture');
|
|
2237
|
+
}
|
|
2238
|
+
}
|
|
2239
|
+
const deltaX = releaseDeltaX;
|
|
2240
|
+
const deltaY = releaseDeltaY;
|
|
2241
|
+
const startTime = swipeStartTimeRef.current;
|
|
2242
|
+
const endTime = getValidTimeStamp(event.timeStamp);
|
|
2243
|
+
const durationMs = startTime !== null && endTime !== null && endTime > startTime ? endTime - startTime : 0;
|
|
2244
|
+
const velocityDurationMs = durationMs > 0 ? Math.max(durationMs, MIN_VELOCITY_DURATION_MS) : 0;
|
|
2245
|
+
const velocityX = velocityDurationMs > 0 ? deltaX / velocityDurationMs : 0;
|
|
2246
|
+
const velocityY = velocityDurationMs > 0 ? deltaY / velocityDurationMs : 0;
|
|
2247
|
+
let releaseVelocityX = lastDragVelocityRef.current.x;
|
|
2248
|
+
let releaseVelocityY = lastDragVelocityRef.current.y;
|
|
2249
|
+
const lastSample = lastDragSampleRef.current;
|
|
2250
|
+
if (lastSample && endTime !== null && endTime >= lastSample.time) {
|
|
2251
|
+
const ageMs = endTime - lastSample.time;
|
|
2252
|
+
if (ageMs <= MAX_RELEASE_VELOCITY_AGE_MS) {
|
|
2253
|
+
const sampleDurationMs = Math.max(ageMs, MIN_RELEASE_VELOCITY_DURATION_MS);
|
|
2254
|
+
const deltaFromLastSampleX = resolvedDragOffset.x - lastSample.x;
|
|
2255
|
+
const deltaFromLastSampleY = resolvedDragOffset.y - lastSample.y;
|
|
2256
|
+
const sampleVelocityX = deltaFromLastSampleX / sampleDurationMs;
|
|
2257
|
+
const sampleVelocityY = deltaFromLastSampleY / sampleDurationMs;
|
|
2258
|
+
if (sampleVelocityX !== 0) {
|
|
2259
|
+
releaseVelocityX = sampleVelocityX;
|
|
2260
|
+
}
|
|
2261
|
+
if (sampleVelocityY !== 0) {
|
|
2262
|
+
releaseVelocityY = sampleVelocityY;
|
|
2263
|
+
}
|
|
2264
|
+
} else {
|
|
2265
|
+
releaseVelocityX = 0;
|
|
2266
|
+
releaseVelocityY = 0;
|
|
2267
|
+
}
|
|
2268
|
+
}
|
|
2269
|
+
const releaseDecision = onRelease?.({
|
|
2270
|
+
event: event.nativeEvent,
|
|
2271
|
+
direction: intendedSwipeDirectionRef.current,
|
|
2272
|
+
deltaX,
|
|
2273
|
+
deltaY,
|
|
2274
|
+
velocityX,
|
|
2275
|
+
velocityY,
|
|
2276
|
+
releaseVelocityX,
|
|
2277
|
+
releaseVelocityY
|
|
2278
|
+
});
|
|
2279
|
+
const hasReleaseDecision = typeof releaseDecision === 'boolean';
|
|
2280
|
+
if (cancelledSwipeRef.current && !hasReleaseDecision) {
|
|
2281
|
+
dragOffsetRef.current = {
|
|
2282
|
+
x: resolvedInitialTransform.x,
|
|
2283
|
+
y: resolvedInitialTransform.y
|
|
2284
|
+
};
|
|
2285
|
+
setCurrentSwipeDirection(undefined);
|
|
2286
|
+
syncDragStyles(false);
|
|
2287
|
+
updateSwipeProgress(0, progressDetails);
|
|
2288
|
+
return;
|
|
2289
|
+
}
|
|
2290
|
+
let shouldClose = false;
|
|
2291
|
+
let dismissDirection;
|
|
2292
|
+
if (hasReleaseDecision) {
|
|
2293
|
+
shouldClose = releaseDecision;
|
|
2294
|
+
dismissDirection = intendedSwipeDirectionRef.current ?? primaryDirection;
|
|
2295
|
+
} else {
|
|
2296
|
+
for (const direction of directions) {
|
|
2297
|
+
switch (direction) {
|
|
2298
|
+
case 'right':
|
|
2299
|
+
if (deltaX > swipeThresholdRef.current) {
|
|
2300
|
+
shouldClose = true;
|
|
2301
|
+
dismissDirection = 'right';
|
|
2302
|
+
}
|
|
2303
|
+
break;
|
|
2304
|
+
case 'left':
|
|
2305
|
+
if (deltaX < -swipeThresholdRef.current) {
|
|
2306
|
+
shouldClose = true;
|
|
2307
|
+
dismissDirection = 'left';
|
|
2308
|
+
}
|
|
2309
|
+
break;
|
|
2310
|
+
case 'down':
|
|
2311
|
+
if (deltaY > swipeThresholdRef.current) {
|
|
2312
|
+
shouldClose = true;
|
|
2313
|
+
dismissDirection = 'down';
|
|
2314
|
+
}
|
|
2315
|
+
break;
|
|
2316
|
+
case 'up':
|
|
2317
|
+
if (deltaY < -swipeThresholdRef.current) {
|
|
2318
|
+
shouldClose = true;
|
|
2319
|
+
dismissDirection = 'up';
|
|
2320
|
+
}
|
|
2321
|
+
break;
|
|
2322
|
+
}
|
|
2323
|
+
if (shouldClose) {
|
|
2324
|
+
break;
|
|
2325
|
+
}
|
|
2326
|
+
}
|
|
2327
|
+
}
|
|
2328
|
+
if (shouldClose && dismissDirection) {
|
|
2329
|
+
setCurrentSwipeDirection(dismissDirection);
|
|
2330
|
+
setDragDismissed(true);
|
|
2331
|
+
syncDragStyles(false);
|
|
2332
|
+
onDismiss?.(event.nativeEvent, {
|
|
2333
|
+
direction: dismissDirection
|
|
2334
|
+
});
|
|
2335
|
+
} else {
|
|
2336
|
+
dragOffsetRef.current = {
|
|
2337
|
+
x: resolvedInitialTransform.x,
|
|
2338
|
+
y: resolvedInitialTransform.y
|
|
2339
|
+
};
|
|
2340
|
+
setCurrentSwipeDirection(undefined);
|
|
2341
|
+
syncDragStyles(false);
|
|
2342
|
+
updateSwipeProgress(0, progressDetails);
|
|
2343
|
+
}
|
|
2344
|
+
});
|
|
2345
|
+
const handleMove = useStableCallback(event => {
|
|
2346
|
+
const currentPos = getPrimaryPointerPosition(event);
|
|
2347
|
+
if (!currentPos) {
|
|
2348
|
+
return;
|
|
2349
|
+
}
|
|
2350
|
+
let endAfterMove = false;
|
|
2351
|
+
if (!('touches' in event)) {
|
|
2352
|
+
const hasPrimaryButton = hasPrimaryMouseButton(event.buttons);
|
|
2353
|
+
if (hasPrimaryButton) {
|
|
2354
|
+
sawPrimaryButtonsOnMoveRef.current = true;
|
|
2355
|
+
}
|
|
2356
|
+
|
|
2357
|
+
// Cancel the swipe if a non-primary button takes over the interaction.
|
|
2358
|
+
// This handles cases where a right-click interrupts dragging.
|
|
2359
|
+
if (event.buttons !== 0 && !hasPrimaryButton) {
|
|
2360
|
+
cancelSwipeInteraction(event);
|
|
2361
|
+
return;
|
|
2362
|
+
}
|
|
2363
|
+
|
|
2364
|
+
// A `buttons: 0` pointermove means the primary button was already released, so the gesture is
|
|
2365
|
+
// over even if no pointerup reached us. On fast trackpad flicks this trailing move is
|
|
2366
|
+
// dispatched just before pointerup; treat it as the release (mirroring touchend) instead of
|
|
2367
|
+
// cancelling and snapping the element back.
|
|
2368
|
+
if (event.buttons === 0 && sawPrimaryButtonsOnMoveRef.current) {
|
|
2369
|
+
if (!isSwipingRef.current) {
|
|
2370
|
+
// The gesture never activated — discard it.
|
|
2371
|
+
handleEnd(event);
|
|
2372
|
+
return;
|
|
2373
|
+
}
|
|
2374
|
+
// This release move can itself carry the threshold-crossing displacement (and the peak
|
|
2375
|
+
// release velocity), so let it flow through `handleMoveCore` below to update the drag
|
|
2376
|
+
// offset / velocity sample, then commit the release afterwards.
|
|
2377
|
+
endAfterMove = true;
|
|
2378
|
+
}
|
|
2379
|
+
}
|
|
2380
|
+
if (!isSwiping && pendingSwipeRef.current) {
|
|
2381
|
+
if (!isTouchLikeEvent(event) && (event.defaultPrevented || event.nativeEvent.defaultPrevented)) {
|
|
2382
|
+
resetPendingSwipeState();
|
|
2383
|
+
return;
|
|
2384
|
+
}
|
|
2385
|
+
const allowedToStart = canStart ? canStart(currentPos, {
|
|
2386
|
+
nativeEvent: event.nativeEvent,
|
|
2387
|
+
direction: primaryDirection
|
|
2388
|
+
}) : true;
|
|
2389
|
+
if (allowedToStart) {
|
|
2390
|
+
const pendingStartPos = pendingSwipeStartPosRef.current;
|
|
2391
|
+
let ignoreScrollableOnStart = false;
|
|
2392
|
+
if (isTouchLikeEvent(event)) {
|
|
2393
|
+
const element = elementRef.current;
|
|
2394
|
+
if (pendingStartPos && element) {
|
|
2395
|
+
const target = getTargetAtPoint(currentPos, event.nativeEvent);
|
|
2396
|
+
const doc = ownerDocument(element);
|
|
2397
|
+
const body = doc.body;
|
|
2398
|
+
const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
|
|
2399
|
+
if (scrollTarget && (contains(element, scrollTarget) || contains(scrollTarget, element))) {
|
|
2400
|
+
const deltaX = currentPos.x - pendingStartPos.x;
|
|
2401
|
+
const deltaY = currentPos.y - pendingStartPos.y;
|
|
2402
|
+
const canSwipeFromEdge = canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY);
|
|
2403
|
+
if (canSwipeFromEdge === false) {
|
|
2404
|
+
return;
|
|
2405
|
+
}
|
|
2406
|
+
if (canSwipeFromEdge === true) {
|
|
2407
|
+
ignoreScrollableOnStart = true;
|
|
2408
|
+
}
|
|
2409
|
+
}
|
|
2410
|
+
}
|
|
2411
|
+
}
|
|
2412
|
+
const started = startSwipeAtPosition(event, currentPos, {
|
|
2413
|
+
ignoreScrollableTarget: ignoreScrollableOnStart,
|
|
2414
|
+
ignoreScrollableAncestors: ignoreScrollableOnStart
|
|
2415
|
+
});
|
|
2416
|
+
if (started) {
|
|
2417
|
+
if (pendingStartPos && ignoreScrollableOnStart) {
|
|
2418
|
+
// Preserve displacement between touchstart and the move that activates swipe from
|
|
2419
|
+
// a scroll-edge so quick flicks can dismiss.
|
|
2420
|
+
clearPendingSwipeStartState();
|
|
2421
|
+
dragStartPosRef.current = pendingStartPos;
|
|
2422
|
+
swipeCancelBaselineRef.current = pendingStartPos;
|
|
2423
|
+
lastMovePosRef.current = pendingStartPos;
|
|
2424
|
+
isFirstPointerMoveRef.current = false;
|
|
2425
|
+
} else {
|
|
2426
|
+
// Start from the current in-bounds position without dropping follow-up move
|
|
2427
|
+
// displacement; this avoids jumps when entering from outside the element while
|
|
2428
|
+
// keeping swipe tracking responsive on the next move.
|
|
2429
|
+
clearPendingSwipeStartState();
|
|
2430
|
+
swipeFromScrollableRef.current = false;
|
|
2431
|
+
}
|
|
2432
|
+
}
|
|
2433
|
+
}
|
|
2434
|
+
}
|
|
2435
|
+
const previousPos = lastMovePosRef.current;
|
|
2436
|
+
const movement = previousPos === null ? {
|
|
2437
|
+
x: 0,
|
|
2438
|
+
y: 0
|
|
2439
|
+
} : {
|
|
2440
|
+
x: currentPos.x - previousPos.x,
|
|
2441
|
+
y: currentPos.y - previousPos.y
|
|
2442
|
+
};
|
|
2443
|
+
lastMovePosRef.current = currentPos;
|
|
2444
|
+
handleMoveCore(event, currentPos, movement);
|
|
2445
|
+
|
|
2446
|
+
// `endAfterMove` is only set in the non-touch branch above; the `'touches'` guard re-narrows the
|
|
2447
|
+
// event type for `handleEnd` after the shared move handling has run.
|
|
2448
|
+
if (endAfterMove && !('touches' in event)) {
|
|
2449
|
+
handleEnd(event);
|
|
2450
|
+
}
|
|
2451
|
+
});
|
|
2452
|
+
|
|
2453
|
+
// Feeds a native touchmove into the swipe pipeline. Used by consumers that claim the gesture
|
|
2454
|
+
// in a capture-phase listener and stop it from reaching React's delegated touch handlers.
|
|
2455
|
+
const moveNative = useStableCallback((nativeEvent, currentTarget) => {
|
|
2456
|
+
handleMove({
|
|
2457
|
+
touches: nativeEvent.touches,
|
|
2458
|
+
currentTarget,
|
|
2459
|
+
nativeEvent,
|
|
2460
|
+
defaultPrevented: nativeEvent.defaultPrevented,
|
|
2461
|
+
timeStamp: nativeEvent.timeStamp
|
|
2462
|
+
});
|
|
2463
|
+
});
|
|
2464
|
+
const getDragStyles = React.useCallback(() => {
|
|
2465
|
+
const dragOffset = dragOffsetRef.current;
|
|
2466
|
+
const initialTransform = initialTransformRef.current;
|
|
2467
|
+
const deltaX = dragOffset.x - initialTransform.x;
|
|
2468
|
+
const deltaY = dragOffset.y - initialTransform.y;
|
|
2469
|
+
if (!isSwiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
|
|
2470
|
+
return {
|
|
2471
|
+
[movementCssVars.x]: '0px',
|
|
2472
|
+
[movementCssVars.y]: '0px'
|
|
2473
|
+
};
|
|
2474
|
+
}
|
|
2475
|
+
return {
|
|
2476
|
+
transition: isSwiping ? 'none' : undefined,
|
|
2477
|
+
// While swiping, freeze the element at its current visual transform so it doesn't snap to the
|
|
2478
|
+
// end position.
|
|
2479
|
+
transform: isSwiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
|
|
2480
|
+
[movementCssVars.x]: `${deltaX}px`,
|
|
2481
|
+
[movementCssVars.y]: `${deltaY}px`
|
|
2482
|
+
};
|
|
2483
|
+
}, [dragDismissed, isSwiping, movementCssVars]);
|
|
2484
|
+
const getPointerProps = React.useCallback(() => {
|
|
2485
|
+
if (!enabled) {
|
|
2486
|
+
return {};
|
|
2487
|
+
}
|
|
2488
|
+
return {
|
|
2489
|
+
onPointerDown: handleStart,
|
|
2490
|
+
onPointerMove: handleMove,
|
|
2491
|
+
onPointerUp: handleEnd,
|
|
2492
|
+
onPointerCancel: handleEnd
|
|
2493
|
+
};
|
|
2494
|
+
}, [enabled, handleEnd, handleMove, handleStart]);
|
|
2495
|
+
const getTouchProps = React.useCallback(() => {
|
|
2496
|
+
if (!enabled) {
|
|
2497
|
+
return {};
|
|
2498
|
+
}
|
|
2499
|
+
return {
|
|
2500
|
+
onTouchStart: handleStart,
|
|
2501
|
+
onTouchMove: handleMove,
|
|
2502
|
+
onTouchEnd: handleEnd,
|
|
2503
|
+
onTouchCancel: handleEnd
|
|
2504
|
+
};
|
|
2505
|
+
}, [enabled, handleEnd, handleMove, handleStart]);
|
|
2506
|
+
return {
|
|
2507
|
+
swiping: isSwiping,
|
|
2508
|
+
swipeDirection: currentSwipeDirection,
|
|
2509
|
+
dragDismissed,
|
|
2510
|
+
getPointerProps,
|
|
2511
|
+
getTouchProps,
|
|
2512
|
+
moveNative,
|
|
2513
|
+
getDragStyles,
|
|
2514
|
+
reset
|
|
2515
|
+
};
|
|
2516
|
+
}
|
|
2517
|
+
|
|
2518
|
+
/**
|
|
2519
|
+
* A button that opens the drawer.
|
|
2520
|
+
* Renders a `<button>` element.
|
|
2521
|
+
*
|
|
2522
|
+
* Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
|
|
2523
|
+
*/
|
|
2524
|
+
const DrawerTrigger = DialogTrigger;
|
|
2525
|
+
|
|
2526
|
+
const DrawerVirtualKeyboardContext = /*#__PURE__*/React.createContext(undefined);
|
|
2527
|
+
if (process.env.NODE_ENV !== "production") DrawerVirtualKeyboardContext.displayName = "DrawerVirtualKeyboardContext";
|
|
2528
|
+
function useDrawerVirtualKeyboardContext() {
|
|
2529
|
+
return React.useContext(DrawerVirtualKeyboardContext);
|
|
2530
|
+
}
|
|
2531
|
+
|
|
2532
|
+
const MIN_SWIPE_THRESHOLD = 10;
|
|
2533
|
+
const FAST_SWIPE_VELOCITY = 0.5;
|
|
2534
|
+
const SNAP_VELOCITY_THRESHOLD = 0.5;
|
|
2535
|
+
const SNAP_VELOCITY_MULTIPLIER = 300;
|
|
2536
|
+
const MAX_SNAP_VELOCITY = 4;
|
|
2537
|
+
const MIN_SWIPE_RELEASE_VELOCITY = 0.2;
|
|
2538
|
+
const MAX_SWIPE_RELEASE_VELOCITY = 4;
|
|
2539
|
+
const MIN_SWIPE_RELEASE_DURATION_MS = 80;
|
|
2540
|
+
const MAX_SWIPE_RELEASE_DURATION_MS = 360;
|
|
2541
|
+
const MIN_SWIPE_RELEASE_SCALAR = 0.1;
|
|
2542
|
+
const MAX_SWIPE_RELEASE_SCALAR = 1;
|
|
2543
|
+
const DRAWER_CONTENT_SELECTOR = `[${DRAWER_CONTENT_ATTRIBUTE}]`;
|
|
2544
|
+
/**
|
|
2545
|
+
* A positioning container for the drawer popup that can be made scrollable.
|
|
2546
|
+
* Renders a `<div>` element.
|
|
2547
|
+
*
|
|
2548
|
+
* Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
|
|
2549
|
+
*/
|
|
2550
|
+
const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(props, forwardedRef) {
|
|
2551
|
+
const {
|
|
2552
|
+
render,
|
|
2553
|
+
className,
|
|
2554
|
+
style,
|
|
2555
|
+
children,
|
|
2556
|
+
...elementProps
|
|
2557
|
+
} = props;
|
|
2558
|
+
const {
|
|
2559
|
+
store
|
|
2560
|
+
} = useDialogRootContext();
|
|
2561
|
+
const popupRef = store.context.popupRef;
|
|
2562
|
+
const backdropRef = store.context.backdropRef;
|
|
2563
|
+
const {
|
|
2564
|
+
swipeDirection,
|
|
2565
|
+
notifyParentSwipingChange,
|
|
2566
|
+
notifyParentSwipeProgressChange,
|
|
2567
|
+
frontmostHeight,
|
|
2568
|
+
snapToSequentialPoints
|
|
2569
|
+
} = useDrawerRootContext();
|
|
2570
|
+
const providerContext = useDrawerProviderContext();
|
|
2571
|
+
const {
|
|
2572
|
+
snapPoints,
|
|
2573
|
+
resolvedSnapPoints,
|
|
2574
|
+
activeSnapPoint,
|
|
2575
|
+
activeSnapPointOffset,
|
|
2576
|
+
setActiveSnapPoint,
|
|
2577
|
+
popupHeight
|
|
2578
|
+
} = useDrawerSnapPoints();
|
|
2579
|
+
const open = store.useState('open');
|
|
2580
|
+
const mounted = store.useState('mounted');
|
|
2581
|
+
const nested = store.useState('nested');
|
|
2582
|
+
const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
|
|
2583
|
+
const viewportElement = store.useState('viewportElement');
|
|
2584
|
+
const popupElementState = store.useState('popupElement');
|
|
2585
|
+
const visualStateStore = providerContext?.visualStateStore;
|
|
2586
|
+
const nestedDrawerOpen = nestedOpenDrawerCount > 0;
|
|
2587
|
+
const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
|
|
2588
|
+
const isVerticalScrollAxis = scrollAxis === 'vertical';
|
|
2589
|
+
const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
|
|
2590
|
+
const [swipeRelease, setSwipeRelease] = React.useState(null);
|
|
2591
|
+
const pendingSwipeCloseSnapPointRef = React.useRef(undefined);
|
|
2592
|
+
const resetSwipeRef = React.useRef(null);
|
|
2593
|
+
const controlledDismissFrame = useAnimationFrame();
|
|
2594
|
+
const swipingRef = React.useRef(false);
|
|
2595
|
+
const nestedSwipeActiveRef = React.useRef(false);
|
|
2596
|
+
const lastPointerTypeRef = React.useRef('');
|
|
2597
|
+
const ignoreNextTouchStartFromPenRef = React.useRef(false);
|
|
2598
|
+
const ignoreTouchSwipeRef = React.useRef(false);
|
|
2599
|
+
const touchScrollStateRef = React.useRef(null);
|
|
2600
|
+
const virtualKeyboard = useDrawerVirtualKeyboardContext();
|
|
2601
|
+
const snapPointRange = React.useMemo(() => {
|
|
2602
|
+
if (!snapPoints || snapPoints.length < 2) {
|
|
2603
|
+
return null;
|
|
2604
|
+
}
|
|
2605
|
+
if (swipeDirection !== 'down' && swipeDirection !== 'up') {
|
|
2606
|
+
return null;
|
|
2607
|
+
}
|
|
2608
|
+
if (resolvedSnapPoints.length < 2) {
|
|
2609
|
+
return null;
|
|
2610
|
+
}
|
|
2611
|
+
const offsets = resolvedSnapPoints.map(point => point.offset).filter(offset => Number.isFinite(offset)).sort((a, b) => a - b);
|
|
2612
|
+
if (offsets.length < 2) {
|
|
2613
|
+
return null;
|
|
2614
|
+
}
|
|
2615
|
+
const minOffset = offsets[0];
|
|
2616
|
+
const nextOffset = offsets[1];
|
|
2617
|
+
const maxOffset = offsets[offsets.length - 1];
|
|
2618
|
+
let range = nextOffset - minOffset;
|
|
2619
|
+
if (!Number.isFinite(range) || range <= 0) {
|
|
2620
|
+
const fallbackRange = maxOffset - minOffset;
|
|
2621
|
+
if (!Number.isFinite(fallbackRange) || fallbackRange <= 0) {
|
|
2622
|
+
return null;
|
|
2623
|
+
}
|
|
2624
|
+
range = fallbackRange;
|
|
2625
|
+
}
|
|
2626
|
+
return {
|
|
2627
|
+
minOffset,
|
|
2628
|
+
range
|
|
2629
|
+
};
|
|
2630
|
+
}, [resolvedSnapPoints, snapPoints, swipeDirection]);
|
|
2631
|
+
const snapPointProgress = React.useMemo(() => {
|
|
2632
|
+
if (!snapPointRange || activeSnapPointOffset === null) {
|
|
2633
|
+
return null;
|
|
2634
|
+
}
|
|
2635
|
+
return clamp((activeSnapPointOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
|
|
2636
|
+
}, [activeSnapPointOffset, snapPointRange]);
|
|
2637
|
+
const swipeDirections = React.useMemo(() => {
|
|
2638
|
+
if (snapPoints && snapPoints.length > 0 && (swipeDirection === 'down' || swipeDirection === 'up')) {
|
|
2639
|
+
return swipeDirection === 'down' ? ['down', 'up'] : ['up', 'down'];
|
|
2640
|
+
}
|
|
2641
|
+
return [swipeDirection];
|
|
2642
|
+
}, [snapPoints, swipeDirection]);
|
|
2643
|
+
const setSwipeDismissed = useStableCallback(dismissed => {
|
|
2644
|
+
setSwipeDismissedElements(popupRef.current, backdropRef.current, dismissed);
|
|
2645
|
+
});
|
|
2646
|
+
const clearSwipeRelease = useStableCallback(() => {
|
|
2647
|
+
setSwipeDismissed(false);
|
|
2648
|
+
popupRef.current?.removeAttribute(TransitionStatusDataAttributes.endingStyle);
|
|
2649
|
+
setSwipeRelease(null);
|
|
2650
|
+
});
|
|
2651
|
+
const finishNestedSwipe = useStableCallback(() => {
|
|
2652
|
+
if (!nestedSwipeActiveRef.current) {
|
|
2653
|
+
return;
|
|
2654
|
+
}
|
|
2655
|
+
nestedSwipeActiveRef.current = false;
|
|
2656
|
+
notifyParentSwipingChange?.(false);
|
|
2657
|
+
});
|
|
2658
|
+
const applySwipeProgress = useStableCallback(({
|
|
2659
|
+
resolvedProgress,
|
|
2660
|
+
shouldTrackProgress,
|
|
2661
|
+
notifyParent
|
|
2662
|
+
}) => {
|
|
2663
|
+
const isActive = open && !nested && shouldTrackProgress;
|
|
2664
|
+
const swipeProgress = isActive ? resolvedProgress : 0;
|
|
2665
|
+
const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
|
|
2666
|
+
if (notifyParent && notifyParentSwipeProgressChange) {
|
|
2667
|
+
notifyParentSwipeProgressChange(nestedSwipeProgress);
|
|
2668
|
+
if (nestedSwipeProgress <= 0) {
|
|
2669
|
+
finishNestedSwipe();
|
|
2670
|
+
}
|
|
2671
|
+
}
|
|
2672
|
+
visualStateStore?.set({
|
|
2673
|
+
swipeProgress,
|
|
2674
|
+
frontmostHeight: swipeProgress > 0 ? frontmostHeight : 0
|
|
2675
|
+
});
|
|
2676
|
+
const backdropElement = backdropRef.current;
|
|
2677
|
+
if (!backdropElement) {
|
|
2678
|
+
return;
|
|
2679
|
+
}
|
|
2680
|
+
if (!isActive || swipeProgress <= 0) {
|
|
2681
|
+
backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
|
|
2682
|
+
backdropElement.style.removeProperty(DrawerPopupCssVars.height);
|
|
2683
|
+
return;
|
|
2684
|
+
}
|
|
2685
|
+
backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
|
|
2686
|
+
if (frontmostHeight > 0) {
|
|
2687
|
+
backdropElement.style.setProperty(DrawerPopupCssVars.height, `${frontmostHeight}px`);
|
|
2688
|
+
} else {
|
|
2689
|
+
backdropElement.style.removeProperty(DrawerPopupCssVars.height);
|
|
2690
|
+
}
|
|
2691
|
+
});
|
|
2692
|
+
function resolveSwipeRelease({
|
|
2693
|
+
direction,
|
|
2694
|
+
deltaX,
|
|
2695
|
+
deltaY,
|
|
2696
|
+
velocityX,
|
|
2697
|
+
velocityY,
|
|
2698
|
+
releaseVelocityX,
|
|
2699
|
+
releaseVelocityY
|
|
2700
|
+
}) {
|
|
2701
|
+
if (!direction) {
|
|
2702
|
+
return null;
|
|
2703
|
+
}
|
|
2704
|
+
const popupElement = store.context.popupRef.current;
|
|
2705
|
+
if (!popupElement) {
|
|
2706
|
+
return null;
|
|
2707
|
+
}
|
|
2708
|
+
const size = direction === 'left' || direction === 'right' ? popupElement.offsetWidth : popupElement.offsetHeight;
|
|
2709
|
+
if (!Number.isFinite(size) || size <= 0) {
|
|
2710
|
+
return null;
|
|
2711
|
+
}
|
|
2712
|
+
const axisDelta = direction === 'left' || direction === 'right' ? deltaX : deltaY;
|
|
2713
|
+
const snapPointBaseOffset = snapPoints && snapPoints.length > 0 ? activeSnapPointOffset ?? 0 : 0;
|
|
2714
|
+
let baseOffset = 0;
|
|
2715
|
+
if (direction === 'down') {
|
|
2716
|
+
baseOffset = snapPointBaseOffset;
|
|
2717
|
+
} else if (direction === 'up') {
|
|
2718
|
+
baseOffset = -snapPointBaseOffset;
|
|
2719
|
+
}
|
|
2720
|
+
const translation = baseOffset + axisDelta;
|
|
2721
|
+
const translationAlongDirection = direction === 'left' || direction === 'up' ? -translation : translation;
|
|
2722
|
+
const remainingDistance = Math.max(0, size - translationAlongDirection);
|
|
2723
|
+
if (!Number.isFinite(remainingDistance) || remainingDistance <= 0) {
|
|
2724
|
+
return null;
|
|
2725
|
+
}
|
|
2726
|
+
const axisVelocity = direction === 'left' || direction === 'right' ? releaseVelocityX : releaseVelocityY;
|
|
2727
|
+
const fallbackVelocity = direction === 'left' || direction === 'right' ? velocityX : velocityY;
|
|
2728
|
+
const resolvedVelocity = Math.abs(axisVelocity) > 0 && Number.isFinite(axisVelocity) ? axisVelocity : fallbackVelocity;
|
|
2729
|
+
const directionalVelocity = direction === 'left' || direction === 'up' ? -resolvedVelocity : resolvedVelocity;
|
|
2730
|
+
if (!Number.isFinite(directionalVelocity) || directionalVelocity <= MIN_SWIPE_RELEASE_VELOCITY) {
|
|
2731
|
+
return null;
|
|
2732
|
+
}
|
|
2733
|
+
const clampedVelocity = clamp(directionalVelocity, MIN_SWIPE_RELEASE_VELOCITY, MAX_SWIPE_RELEASE_VELOCITY);
|
|
2734
|
+
const durationMs = clamp(remainingDistance / clampedVelocity, MIN_SWIPE_RELEASE_DURATION_MS, MAX_SWIPE_RELEASE_DURATION_MS);
|
|
2735
|
+
if (!Number.isFinite(durationMs)) {
|
|
2736
|
+
return null;
|
|
2737
|
+
}
|
|
2738
|
+
const normalizedDuration = (durationMs - MIN_SWIPE_RELEASE_DURATION_MS) / (MAX_SWIPE_RELEASE_DURATION_MS - MIN_SWIPE_RELEASE_DURATION_MS);
|
|
2739
|
+
const durationScalar = clamp(MIN_SWIPE_RELEASE_SCALAR + normalizedDuration * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR), MIN_SWIPE_RELEASE_SCALAR, MAX_SWIPE_RELEASE_SCALAR);
|
|
2740
|
+
if (!Number.isFinite(durationScalar) || durationScalar <= 0) {
|
|
2741
|
+
return null;
|
|
2742
|
+
}
|
|
2743
|
+
return durationScalar;
|
|
2744
|
+
}
|
|
2745
|
+
function updateNestedSwipeActive(details) {
|
|
2746
|
+
if (nestedSwipeActiveRef.current || !details) {
|
|
2747
|
+
return;
|
|
2748
|
+
}
|
|
2749
|
+
const direction = details.direction ?? swipeDirection;
|
|
2750
|
+
const delta = direction === 'left' || direction === 'right' ? details.deltaX : details.deltaY;
|
|
2751
|
+
if (!Number.isFinite(delta) || Math.abs(delta) < MIN_SWIPE_THRESHOLD) {
|
|
2752
|
+
return;
|
|
2753
|
+
}
|
|
2754
|
+
nestedSwipeActiveRef.current = true;
|
|
2755
|
+
notifyParentSwipingChange?.(true);
|
|
2756
|
+
}
|
|
2757
|
+
const swipe$1 = useSwipeDismiss({
|
|
2758
|
+
enabled: mounted && !nestedDrawerOpen,
|
|
2759
|
+
directions: swipeDirections,
|
|
2760
|
+
elementRef: store.context.popupRef,
|
|
2761
|
+
ignoreSelectorWhenTouch: false,
|
|
2762
|
+
ignoreScrollableAncestors: true,
|
|
2763
|
+
movementCssVars: {
|
|
2764
|
+
x: DrawerPopupCssVars.swipeMovementX,
|
|
2765
|
+
y: DrawerPopupCssVars.swipeMovementY
|
|
2766
|
+
},
|
|
2767
|
+
onSwipeStart(event) {
|
|
2768
|
+
if ('touches' in event || 'pointerType' in event && event.pointerType === 'touch') {
|
|
2769
|
+
return;
|
|
2770
|
+
}
|
|
2771
|
+
const popupElement = popupRef.current;
|
|
2772
|
+
if (!popupElement) {
|
|
2773
|
+
return;
|
|
2774
|
+
}
|
|
2775
|
+
const doc = ownerDocument(popupElement);
|
|
2776
|
+
const selection = doc.getSelection?.();
|
|
2777
|
+
if (!selection || selection.isCollapsed) {
|
|
2778
|
+
return;
|
|
2779
|
+
}
|
|
2780
|
+
const anchorElement = isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
|
|
2781
|
+
const focusElement = isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
|
|
2782
|
+
if (!contains(popupElement, anchorElement) && !contains(popupElement, focusElement)) {
|
|
2783
|
+
return;
|
|
2784
|
+
}
|
|
2785
|
+
selection.removeAllRanges();
|
|
2786
|
+
},
|
|
2787
|
+
onSwipingChange(swiping) {
|
|
2788
|
+
swipingRef.current = swiping;
|
|
2789
|
+
setBackdropSwipingAttribute(store.context.backdropRef.current, swiping);
|
|
2790
|
+
if (!swiping && !notifyParentSwipeProgressChange) {
|
|
2791
|
+
finishNestedSwipe();
|
|
2792
|
+
}
|
|
2793
|
+
},
|
|
2794
|
+
swipeThreshold({
|
|
2795
|
+
element,
|
|
2796
|
+
direction
|
|
2797
|
+
}) {
|
|
2798
|
+
return getBaseSwipeThreshold(element, direction);
|
|
2799
|
+
},
|
|
2800
|
+
canStart(position, details) {
|
|
2801
|
+
const popupElement = store.context.popupRef.current;
|
|
2802
|
+
if (!popupElement) {
|
|
2803
|
+
return false;
|
|
2804
|
+
}
|
|
2805
|
+
const doc = popupElement.ownerDocument;
|
|
2806
|
+
const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
|
|
2807
|
+
if (!elementAtPoint || !contains(popupElement, elementAtPoint)) {
|
|
2808
|
+
return false;
|
|
2809
|
+
}
|
|
2810
|
+
const nativeEvent = details.nativeEvent;
|
|
2811
|
+
const touchLike = 'touches' in nativeEvent || 'pointerType' in nativeEvent && nativeEvent.pointerType === 'touch';
|
|
2812
|
+
if (touchLike && shouldIgnoreSwipeForTextSelection(doc, popupElement)) {
|
|
2813
|
+
return false;
|
|
2814
|
+
}
|
|
2815
|
+
if (nativeEvent.type === 'touchstart' && isSwipeIgnoredTarget(elementAtPoint)) {
|
|
2816
|
+
return false;
|
|
2817
|
+
}
|
|
2818
|
+
return true;
|
|
2819
|
+
},
|
|
2820
|
+
onProgress(progress, details) {
|
|
2821
|
+
updateNestedSwipeActive(details);
|
|
2822
|
+
const hasSnapPoints = Boolean(snapPoints && snapPoints.length > 0);
|
|
2823
|
+
if (swipingRef.current && swipeDirection === 'down' && hasSnapPoints && details && Number.isFinite(details.deltaY)) {
|
|
2824
|
+
const popupElement = store.context.popupRef.current;
|
|
2825
|
+
if (popupElement) {
|
|
2826
|
+
popupElement.style.removeProperty('transform');
|
|
2827
|
+
popupElement.style.setProperty(DrawerPopupCssVars.swipeMovementY, `${getSnapPointSwipeMovement(activeSnapPointOffset ?? 0, details.deltaY)}px`);
|
|
2828
|
+
}
|
|
2829
|
+
}
|
|
2830
|
+
const currentDirection = details?.direction ?? swipe$1.swipeDirection;
|
|
2831
|
+
const isDismissSwipe = currentDirection === undefined || currentDirection === swipeDirection;
|
|
2832
|
+
const isVerticalSwipe = swipeDirection === 'down' || swipeDirection === 'up';
|
|
2833
|
+
const shouldTrackProgress = hasSnapPoints && isVerticalSwipe || !hasSnapPoints || swipeDirection === 'left' || swipeDirection === 'right' || isDismissSwipe;
|
|
2834
|
+
let resolvedProgress = progress;
|
|
2835
|
+
if (snapPointRange && popupHeight > 0) {
|
|
2836
|
+
if (details && Number.isFinite(details.deltaY)) {
|
|
2837
|
+
const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
|
|
2838
|
+
const nextOffset = clamp(baseOffset + details.deltaY, 0, popupHeight);
|
|
2839
|
+
resolvedProgress = clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
|
|
2840
|
+
} else if (snapPointProgress !== null) {
|
|
2841
|
+
resolvedProgress = snapPointProgress;
|
|
2842
|
+
} else if (currentDirection === 'down' || currentDirection === 'up') {
|
|
2843
|
+
const displacement = progress * popupHeight;
|
|
2844
|
+
const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
|
|
2845
|
+
const nextOffset = currentDirection === 'down' ? baseOffset + displacement : baseOffset - displacement;
|
|
2846
|
+
resolvedProgress = clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
|
|
2847
|
+
}
|
|
2848
|
+
}
|
|
2849
|
+
applySwipeProgress({
|
|
2850
|
+
resolvedProgress,
|
|
2851
|
+
shouldTrackProgress,
|
|
2852
|
+
notifyParent: true
|
|
2853
|
+
});
|
|
2854
|
+
},
|
|
2855
|
+
onRelease({
|
|
2856
|
+
event,
|
|
2857
|
+
deltaX,
|
|
2858
|
+
deltaY,
|
|
2859
|
+
direction,
|
|
2860
|
+
velocityX,
|
|
2861
|
+
velocityY,
|
|
2862
|
+
releaseVelocityX,
|
|
2863
|
+
releaseVelocityY
|
|
2864
|
+
}) {
|
|
2865
|
+
const swipeReleasePayload = {
|
|
2866
|
+
deltaX,
|
|
2867
|
+
deltaY,
|
|
2868
|
+
velocityX,
|
|
2869
|
+
velocityY,
|
|
2870
|
+
releaseVelocityX,
|
|
2871
|
+
releaseVelocityY
|
|
2872
|
+
};
|
|
2873
|
+
function startSwipeRelease(resolvedDirection) {
|
|
2874
|
+
// Start ending transition styles earlier and synchronously to prevent a period where
|
|
2875
|
+
// the popup appears stuck on release before the actual closing animation starts.
|
|
2876
|
+
const popupElement = store.context.popupRef.current;
|
|
2877
|
+
if (!popupElement) {
|
|
2878
|
+
return;
|
|
2879
|
+
}
|
|
2880
|
+
finishNestedSwipe();
|
|
2881
|
+
setSwipeDismissed(true);
|
|
2882
|
+
popupElement.style.removeProperty('transition');
|
|
2883
|
+
popupElement.setAttribute(TransitionStatusDataAttributes.endingStyle, '');
|
|
2884
|
+
ReactDOM.flushSync(() => {
|
|
2885
|
+
setSwipeRelease(resolveSwipeRelease({
|
|
2886
|
+
direction: resolvedDirection,
|
|
2887
|
+
...swipeReleasePayload
|
|
2888
|
+
}));
|
|
2889
|
+
});
|
|
2890
|
+
}
|
|
2891
|
+
if (!snapPoints || snapPoints.length === 0) {
|
|
2892
|
+
if (!direction) {
|
|
2893
|
+
clearSwipeRelease();
|
|
2894
|
+
return undefined;
|
|
2895
|
+
}
|
|
2896
|
+
const element = store.context.popupRef.current;
|
|
2897
|
+
if (!element) {
|
|
2898
|
+
clearSwipeRelease();
|
|
2899
|
+
return undefined;
|
|
2900
|
+
}
|
|
2901
|
+
const baseThreshold = getBaseSwipeThreshold(element, direction);
|
|
2902
|
+
const delta = direction === 'left' || direction === 'right' ? deltaX : deltaY;
|
|
2903
|
+
if (!Number.isFinite(delta)) {
|
|
2904
|
+
clearSwipeRelease();
|
|
2905
|
+
return undefined;
|
|
2906
|
+
}
|
|
2907
|
+
const directionalDelta = direction === 'left' || direction === 'up' ? -delta : delta;
|
|
2908
|
+
if (directionalDelta <= 0) {
|
|
2909
|
+
clearSwipeRelease();
|
|
2910
|
+
return false;
|
|
2911
|
+
}
|
|
2912
|
+
const velocity = direction === 'left' || direction === 'right' ? velocityX : velocityY;
|
|
2913
|
+
const directionalVelocity = direction === 'left' || direction === 'up' ? -velocity : velocity;
|
|
2914
|
+
if (directionalVelocity >= FAST_SWIPE_VELOCITY && directionalDelta > 0) {
|
|
2915
|
+
startSwipeRelease(direction);
|
|
2916
|
+
return true;
|
|
2917
|
+
}
|
|
2918
|
+
const shouldClose = directionalDelta > baseThreshold;
|
|
2919
|
+
if (shouldClose) {
|
|
2920
|
+
startSwipeRelease(direction);
|
|
2921
|
+
} else {
|
|
2922
|
+
clearSwipeRelease();
|
|
2923
|
+
}
|
|
2924
|
+
return shouldClose;
|
|
2925
|
+
}
|
|
2926
|
+
if (swipeDirection !== 'down' && swipeDirection !== 'up') {
|
|
2927
|
+
clearSwipeRelease();
|
|
2928
|
+
return undefined;
|
|
2929
|
+
}
|
|
2930
|
+
if (!popupHeight || resolvedSnapPoints.length === 0) {
|
|
2931
|
+
clearSwipeRelease();
|
|
2932
|
+
return undefined;
|
|
2933
|
+
}
|
|
2934
|
+
const dragDelta = swipeDirection === 'down' ? deltaY : -deltaY;
|
|
2935
|
+
if (!Number.isFinite(dragDelta)) {
|
|
2936
|
+
clearSwipeRelease();
|
|
2937
|
+
return undefined;
|
|
2938
|
+
}
|
|
2939
|
+
const dragDirection = Math.sign(dragDelta);
|
|
2940
|
+
const releaseDirectionalVelocity = swipeDirection === 'down' ? releaseVelocityY : -releaseVelocityY;
|
|
2941
|
+
const fallbackDirectionalVelocity = swipeDirection === 'down' ? velocityY : -velocityY;
|
|
2942
|
+
let resolvedDirectionalVelocity = Number.isFinite(releaseDirectionalVelocity) ? releaseDirectionalVelocity : fallbackDirectionalVelocity;
|
|
2943
|
+
if (dragDirection !== 0 && Math.abs(dragDelta) >= MIN_SWIPE_THRESHOLD && Number.isFinite(resolvedDirectionalVelocity)) {
|
|
2944
|
+
const velocityDirection = Math.sign(resolvedDirectionalVelocity);
|
|
2945
|
+
if (velocityDirection !== 0 && velocityDirection !== dragDirection) {
|
|
2946
|
+
// Ignore touch reversals that would otherwise flip the snap decision.
|
|
2947
|
+
resolvedDirectionalVelocity = fallbackDirectionalVelocity;
|
|
2948
|
+
}
|
|
2949
|
+
}
|
|
2950
|
+
const currentOffset = activeSnapPointOffset ?? 0;
|
|
2951
|
+
const dragTargetOffset = clamp(currentOffset + dragDelta, 0, popupHeight);
|
|
2952
|
+
const velocityOffset = Number.isFinite(resolvedDirectionalVelocity) && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? clamp(resolvedDirectionalVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
|
|
2953
|
+
const targetOffset = snapToSequentialPoints ? dragTargetOffset : clamp(dragTargetOffset + velocityOffset, 0, popupHeight);
|
|
2954
|
+
const snapPointEventDetails = createChangeEventDetails(swipe, event);
|
|
2955
|
+
const closeFromSnapPoints = () => {
|
|
2956
|
+
pendingSwipeCloseSnapPointRef.current = activeSnapPoint;
|
|
2957
|
+
setActiveSnapPoint?.(null, snapPointEventDetails);
|
|
2958
|
+
startSwipeRelease(swipeDirection);
|
|
2959
|
+
return true;
|
|
2960
|
+
};
|
|
2961
|
+
if (snapToSequentialPoints) {
|
|
2962
|
+
const orderedSnapPoints = [...resolvedSnapPoints].sort((first, second) => first.offset - second.offset);
|
|
2963
|
+
if (orderedSnapPoints.length === 0) {
|
|
2964
|
+
clearSwipeRelease();
|
|
2965
|
+
return false;
|
|
2966
|
+
}
|
|
2967
|
+
let currentIndex = 0;
|
|
2968
|
+
let closestDistance = Math.abs(currentOffset - orderedSnapPoints[0].offset);
|
|
2969
|
+
for (let index = 1; index < orderedSnapPoints.length; index += 1) {
|
|
2970
|
+
const distance = Math.abs(currentOffset - orderedSnapPoints[index].offset);
|
|
2971
|
+
if (distance < closestDistance) {
|
|
2972
|
+
closestDistance = distance;
|
|
2973
|
+
currentIndex = index;
|
|
2974
|
+
}
|
|
2975
|
+
}
|
|
2976
|
+
let targetSnapPoint = orderedSnapPoints[0];
|
|
2977
|
+
closestDistance = Math.abs(targetOffset - targetSnapPoint.offset);
|
|
2978
|
+
for (const snapPoint of orderedSnapPoints) {
|
|
2979
|
+
const distance = Math.abs(targetOffset - snapPoint.offset);
|
|
2980
|
+
if (distance < closestDistance) {
|
|
2981
|
+
closestDistance = distance;
|
|
2982
|
+
targetSnapPoint = snapPoint;
|
|
2983
|
+
}
|
|
2984
|
+
}
|
|
2985
|
+
const velocityDirection = Math.sign(resolvedDirectionalVelocity);
|
|
2986
|
+
const shouldAdvance = dragDirection !== 0 && velocityDirection !== 0 && velocityDirection === dragDirection && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD;
|
|
2987
|
+
let effectiveTargetOffset = targetOffset;
|
|
2988
|
+
if (shouldAdvance) {
|
|
2989
|
+
const adjacentIndex = clamp(currentIndex + dragDirection, 0, orderedSnapPoints.length - 1);
|
|
2990
|
+
if (adjacentIndex !== currentIndex) {
|
|
2991
|
+
const adjacentPoint = orderedSnapPoints[adjacentIndex];
|
|
2992
|
+
const shouldForceAdjacent = dragDirection > 0 ? targetOffset < adjacentPoint.offset : targetOffset > adjacentPoint.offset;
|
|
2993
|
+
if (shouldForceAdjacent) {
|
|
2994
|
+
targetSnapPoint = adjacentPoint;
|
|
2995
|
+
effectiveTargetOffset = adjacentPoint.offset;
|
|
2996
|
+
}
|
|
2997
|
+
} else if (dragDirection > 0) {
|
|
2998
|
+
return closeFromSnapPoints();
|
|
2999
|
+
}
|
|
3000
|
+
}
|
|
3001
|
+
const closeOffset = popupHeight;
|
|
3002
|
+
const closeDistance = Math.abs(effectiveTargetOffset - closeOffset);
|
|
3003
|
+
const snapDistance = Math.abs(effectiveTargetOffset - targetSnapPoint.offset);
|
|
3004
|
+
if (closeDistance < snapDistance) {
|
|
3005
|
+
return closeFromSnapPoints();
|
|
3006
|
+
}
|
|
3007
|
+
setActiveSnapPoint?.(targetSnapPoint.value, snapPointEventDetails);
|
|
3008
|
+
clearSwipeRelease();
|
|
3009
|
+
return false;
|
|
3010
|
+
}
|
|
3011
|
+
if (resolvedDirectionalVelocity >= FAST_SWIPE_VELOCITY && dragDelta > 0) {
|
|
3012
|
+
return closeFromSnapPoints();
|
|
3013
|
+
}
|
|
3014
|
+
let closestSnapPoint = resolvedSnapPoints[0];
|
|
3015
|
+
let closestDistance = Math.abs(targetOffset - closestSnapPoint.offset);
|
|
3016
|
+
for (const snapPoint of resolvedSnapPoints) {
|
|
3017
|
+
const distance = Math.abs(targetOffset - snapPoint.offset);
|
|
3018
|
+
if (distance < closestDistance) {
|
|
3019
|
+
closestDistance = distance;
|
|
3020
|
+
closestSnapPoint = snapPoint;
|
|
3021
|
+
}
|
|
3022
|
+
}
|
|
3023
|
+
const closeOffset = popupHeight;
|
|
3024
|
+
const closeDistance = Math.abs(targetOffset - closeOffset);
|
|
3025
|
+
if (closeDistance < closestDistance) {
|
|
3026
|
+
return closeFromSnapPoints();
|
|
3027
|
+
}
|
|
3028
|
+
setActiveSnapPoint?.(closestSnapPoint.value, snapPointEventDetails);
|
|
3029
|
+
clearSwipeRelease();
|
|
3030
|
+
return false;
|
|
3031
|
+
},
|
|
3032
|
+
onDismiss(event) {
|
|
3033
|
+
visualStateStore?.set({
|
|
3034
|
+
swipeProgress: 0,
|
|
3035
|
+
frontmostHeight: 0
|
|
3036
|
+
});
|
|
3037
|
+
const backdropElement = store.context.backdropRef.current;
|
|
3038
|
+
if (backdropElement) {
|
|
3039
|
+
backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
|
|
3040
|
+
backdropElement.style.removeProperty(DrawerPopupCssVars.height);
|
|
3041
|
+
}
|
|
3042
|
+
const dismissEventDetails = createChangeEventDetails(swipe, event);
|
|
3043
|
+
store.setOpen(false, dismissEventDetails);
|
|
3044
|
+
if (dismissEventDetails.isCanceled) {
|
|
3045
|
+
const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
|
|
3046
|
+
if (pendingSnapPoint !== undefined) {
|
|
3047
|
+
setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails(swipe, event));
|
|
3048
|
+
}
|
|
3049
|
+
pendingSwipeCloseSnapPointRef.current = undefined;
|
|
3050
|
+
resetSwipeRef.current?.();
|
|
3051
|
+
clearSwipeRelease();
|
|
3052
|
+
return;
|
|
3053
|
+
}
|
|
3054
|
+
|
|
3055
|
+
// In controlled mode, the effective open state may not have changed yet
|
|
3056
|
+
// (openProp takes precedence over state.open). Proceed optimistically with the
|
|
3057
|
+
// dismiss animation — React's Scheduler flushes before the next rAF, so we can
|
|
3058
|
+
// reliably check whether the parent accepted or rejected the close.
|
|
3059
|
+
// Note: if onOpenChange is asynchronous (e.g., closes the drawer after a network
|
|
3060
|
+
// call), the rAF check will see open === true, revert the animation, and the
|
|
3061
|
+
// drawer will close without animation when the parent eventually sets open={false}.
|
|
3062
|
+
if (store.select('open')) {
|
|
3063
|
+
const savedEvent = event;
|
|
3064
|
+
controlledDismissFrame.request(() => {
|
|
3065
|
+
if (store.select('open')) {
|
|
3066
|
+
// Parent rejected: revert animation and restore snap point.
|
|
3067
|
+
const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
|
|
3068
|
+
if (pendingSnapPoint !== undefined) {
|
|
3069
|
+
setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails(swipe, savedEvent));
|
|
3070
|
+
}
|
|
3071
|
+
pendingSwipeCloseSnapPointRef.current = undefined;
|
|
3072
|
+
clearSwipeRelease();
|
|
3073
|
+
resetSwipeRef.current?.();
|
|
3074
|
+
} else {
|
|
3075
|
+
// Parent accepted: clean up the ref.
|
|
3076
|
+
pendingSwipeCloseSnapPointRef.current = undefined;
|
|
3077
|
+
}
|
|
3078
|
+
});
|
|
3079
|
+
return;
|
|
3080
|
+
}
|
|
3081
|
+
pendingSwipeCloseSnapPointRef.current = undefined;
|
|
3082
|
+
setSwipeDismissed(true);
|
|
3083
|
+
}
|
|
3084
|
+
});
|
|
3085
|
+
const swipePointerProps = swipe$1.getPointerProps();
|
|
3086
|
+
const swipeTouchProps = swipe$1.getTouchProps();
|
|
3087
|
+
const {
|
|
3088
|
+
moveNative: moveSwipeNative,
|
|
3089
|
+
reset: resetSwipe
|
|
3090
|
+
} = swipe$1;
|
|
3091
|
+
resetSwipeRef.current = resetSwipe;
|
|
3092
|
+
React.useEffect(() => {
|
|
3093
|
+
const rootElement = viewportElement ?? popupElementState;
|
|
3094
|
+
if (!rootElement) {
|
|
3095
|
+
return undefined;
|
|
3096
|
+
}
|
|
3097
|
+
const resolvedRootElement = rootElement;
|
|
3098
|
+
const doc = ownerDocument(resolvedRootElement);
|
|
3099
|
+
const win = getWindow(doc);
|
|
3100
|
+
function handleNativeTouchMove(event) {
|
|
3101
|
+
// The virtual keyboard provider observes the move to tell a tap apart from a drag.
|
|
3102
|
+
// It must run even when the swipe gesture below claims the event with
|
|
3103
|
+
// `stopPropagation()`, which would otherwise prevent React's delegated handlers
|
|
3104
|
+
// (and the provider) from ever seeing the move.
|
|
3105
|
+
virtualKeyboard?.onTouchMove(event);
|
|
3106
|
+
if (ignoreTouchSwipeRef.current) {
|
|
3107
|
+
return;
|
|
3108
|
+
}
|
|
3109
|
+
const touchState = touchScrollStateRef.current;
|
|
3110
|
+
const touch = event.touches[0];
|
|
3111
|
+
if (!touch || !touchState) {
|
|
3112
|
+
return;
|
|
3113
|
+
}
|
|
3114
|
+
const drawerAxisDelta = isVerticalScrollAxis ? touch.clientY - touchState.lastY : touch.clientX - touchState.lastX;
|
|
3115
|
+
|
|
3116
|
+
// Preserve native range interaction by never locking touchmove for range inputs.
|
|
3117
|
+
if (isEventOnRangeInput(event, win)) {
|
|
3118
|
+
touchState.allowSwipe = false;
|
|
3119
|
+
updateTouchScrollPosition(touchState, touch);
|
|
3120
|
+
return;
|
|
3121
|
+
}
|
|
3122
|
+
|
|
3123
|
+
// Avoid blocking pinch zoom or text selection adjustments on iOS Safari.
|
|
3124
|
+
if (event.touches.length === 2) {
|
|
3125
|
+
updateTouchScrollPosition(touchState, touch);
|
|
3126
|
+
return;
|
|
3127
|
+
}
|
|
3128
|
+
const allowTouchMove = shouldIgnoreSwipeForTextSelection(doc, resolvedRootElement);
|
|
3129
|
+
if (allowTouchMove || !open || !mounted || nestedDrawerOpen) {
|
|
3130
|
+
updateTouchScrollPosition(touchState, touch);
|
|
3131
|
+
return;
|
|
3132
|
+
}
|
|
3133
|
+
if (preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis)) {
|
|
3134
|
+
updateTouchScrollPosition(touchState, touch);
|
|
3135
|
+
return;
|
|
3136
|
+
}
|
|
3137
|
+
const scrollTarget = touchState.scrollTarget;
|
|
3138
|
+
if (!scrollTarget || scrollTarget === doc.documentElement || scrollTarget === doc.body) {
|
|
3139
|
+
if (event.cancelable) {
|
|
3140
|
+
event.preventDefault();
|
|
3141
|
+
}
|
|
3142
|
+
// Claim the gesture before React's delegated touch handlers see it; dispatching the
|
|
3143
|
+
// move through React re-rasterizes the popup content on every frame.
|
|
3144
|
+
event.stopPropagation();
|
|
3145
|
+
moveSwipeNative(event, resolvedRootElement);
|
|
3146
|
+
updateTouchScrollPosition(touchState, touch);
|
|
3147
|
+
return;
|
|
3148
|
+
}
|
|
3149
|
+
const hasScrollableContent = hasScrollableContentOnAxis(scrollTarget, scrollAxis);
|
|
3150
|
+
if (!hasScrollableContent) {
|
|
3151
|
+
// If the scroll container doesn't overflow on the drawer axis, prevent the window from
|
|
3152
|
+
// scrolling instead.
|
|
3153
|
+
if (event.cancelable) {
|
|
3154
|
+
event.preventDefault();
|
|
3155
|
+
}
|
|
3156
|
+
event.stopPropagation();
|
|
3157
|
+
updateTouchScrollPosition(touchState, touch);
|
|
3158
|
+
return;
|
|
3159
|
+
}
|
|
3160
|
+
const delta = drawerAxisDelta;
|
|
3161
|
+
if (delta !== 0) {
|
|
3162
|
+
const canSwipeFromScrollEdge = canSwipeFromScrollEdgeOnMove(scrollTarget, scrollAxis, swipeDirection, delta);
|
|
3163
|
+
if (!touchState.allowSwipe) {
|
|
3164
|
+
if (!event.cancelable) {
|
|
3165
|
+
touchState.allowSwipe = false;
|
|
3166
|
+
} else if (canSwipeFromScrollEdge) {
|
|
3167
|
+
touchState.allowSwipe = true;
|
|
3168
|
+
event.preventDefault();
|
|
3169
|
+
} else {
|
|
3170
|
+
touchState.allowSwipe = false;
|
|
3171
|
+
}
|
|
3172
|
+
} else if (event.cancelable) {
|
|
3173
|
+
event.preventDefault();
|
|
3174
|
+
}
|
|
3175
|
+
}
|
|
3176
|
+
if (touchState.allowSwipe === true) {
|
|
3177
|
+
event.stopPropagation();
|
|
3178
|
+
moveSwipeNative(event, resolvedRootElement);
|
|
3179
|
+
}
|
|
3180
|
+
updateTouchScrollPosition(touchState, touch);
|
|
3181
|
+
}
|
|
3182
|
+
return addEventListener(doc, 'touchmove', handleNativeTouchMove, {
|
|
3183
|
+
passive: false,
|
|
3184
|
+
capture: true
|
|
3185
|
+
});
|
|
3186
|
+
}, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, moveSwipeNative, viewportElement, virtualKeyboard]);
|
|
3187
|
+
React.useEffect(() => {
|
|
3188
|
+
if (!snapPointRange || swipe$1.swiping) {
|
|
3189
|
+
return;
|
|
3190
|
+
}
|
|
3191
|
+
const resolvedProgress = !open || nested ? 0 : snapPointProgress ?? 0;
|
|
3192
|
+
applySwipeProgress({
|
|
3193
|
+
resolvedProgress,
|
|
3194
|
+
shouldTrackProgress: true,
|
|
3195
|
+
notifyParent: false
|
|
3196
|
+
});
|
|
3197
|
+
}, [applySwipeProgress, frontmostHeight, nested, notifyParentSwipeProgressChange, open, snapPointProgress, snapPointRange, swipe$1.swiping, store, visualStateStore]);
|
|
3198
|
+
React.useEffect(() => {
|
|
3199
|
+
if (!notifyParentSwipeProgressChange) {
|
|
3200
|
+
return undefined;
|
|
3201
|
+
}
|
|
3202
|
+
if (!open) {
|
|
3203
|
+
notifyParentSwipeProgressChange(0);
|
|
3204
|
+
}
|
|
3205
|
+
return () => {
|
|
3206
|
+
notifyParentSwipeProgressChange(0);
|
|
3207
|
+
};
|
|
3208
|
+
}, [notifyParentSwipeProgressChange, open]);
|
|
3209
|
+
React.useEffect(() => {
|
|
3210
|
+
if (open) {
|
|
3211
|
+
resetSwipe();
|
|
3212
|
+
clearSwipeRelease();
|
|
3213
|
+
}
|
|
3214
|
+
}, [clearSwipeRelease, open, resetSwipe]);
|
|
3215
|
+
React.useEffect(() => {
|
|
3216
|
+
const backdropElement = backdropRef.current;
|
|
3217
|
+
return () => {
|
|
3218
|
+
visualStateStore?.set({
|
|
3219
|
+
swipeProgress: 0,
|
|
3220
|
+
frontmostHeight: 0
|
|
3221
|
+
});
|
|
3222
|
+
setBackdropSwipingAttribute(backdropElement, false);
|
|
3223
|
+
// `data-swiping` is set on whichever backdrop is current when a swipe starts, which can
|
|
3224
|
+
// differ from the captured element if the backdrop mounted late or changed identity.
|
|
3225
|
+
// Reading the live ref here is intentional so the current backdrop is cleared too.
|
|
3226
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3227
|
+
const currentBackdrop = backdropRef.current;
|
|
3228
|
+
if (currentBackdrop !== backdropElement) {
|
|
3229
|
+
setBackdropSwipingAttribute(currentBackdrop, false);
|
|
3230
|
+
}
|
|
3231
|
+
finishNestedSwipe();
|
|
3232
|
+
};
|
|
3233
|
+
}, [backdropRef, finishNestedSwipe, visualStateStore]);
|
|
3234
|
+
const swipeProviderValue = React.useMemo(() => ({
|
|
3235
|
+
swiping: swipe$1.swiping,
|
|
3236
|
+
getDragStyles: swipe$1.getDragStyles,
|
|
3237
|
+
swipeStrength: swipeRelease ?? null,
|
|
3238
|
+
setSwipeDismissed
|
|
3239
|
+
}), [setSwipeDismissed, swipe$1.getDragStyles, swipe$1.swiping, swipeRelease]);
|
|
3240
|
+
function resetTouchTrackingState() {
|
|
3241
|
+
ignoreTouchSwipeRef.current = false;
|
|
3242
|
+
touchScrollStateRef.current = null;
|
|
3243
|
+
lastPointerTypeRef.current = '';
|
|
3244
|
+
ignoreNextTouchStartFromPenRef.current = false;
|
|
3245
|
+
}
|
|
3246
|
+
return /*#__PURE__*/jsx(DialogViewport, {
|
|
3247
|
+
ref: forwardedRef,
|
|
3248
|
+
className: className,
|
|
3249
|
+
style: style,
|
|
3250
|
+
render: render,
|
|
3251
|
+
...mergeProps(elementProps, {
|
|
3252
|
+
onPointerDown(event) {
|
|
3253
|
+
lastPointerTypeRef.current = event.pointerType;
|
|
3254
|
+
ignoreNextTouchStartFromPenRef.current = event.pointerType === 'pen';
|
|
3255
|
+
if (!open || !mounted || nestedDrawerOpen) {
|
|
3256
|
+
return;
|
|
3257
|
+
}
|
|
3258
|
+
const doc = ownerDocument(event.currentTarget);
|
|
3259
|
+
const elementAtPoint = getElementAtPoint(doc, event.clientX, event.clientY);
|
|
3260
|
+
if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) {
|
|
3261
|
+
return;
|
|
3262
|
+
}
|
|
3263
|
+
if (event.pointerType === 'touch') {
|
|
3264
|
+
return;
|
|
3265
|
+
}
|
|
3266
|
+
swipePointerProps.onPointerDown?.(event);
|
|
3267
|
+
},
|
|
3268
|
+
onPointerMove(event) {
|
|
3269
|
+
if (event.pointerType === 'touch') {
|
|
3270
|
+
return;
|
|
3271
|
+
}
|
|
3272
|
+
swipePointerProps.onPointerMove?.(event);
|
|
3273
|
+
},
|
|
3274
|
+
onPointerUp(event) {
|
|
3275
|
+
if (lastPointerTypeRef.current === event.pointerType) {
|
|
3276
|
+
lastPointerTypeRef.current = '';
|
|
3277
|
+
}
|
|
3278
|
+
if (event.pointerType === 'touch') {
|
|
3279
|
+
return;
|
|
3280
|
+
}
|
|
3281
|
+
swipePointerProps.onPointerUp?.(event);
|
|
3282
|
+
},
|
|
3283
|
+
onPointerCancel(event) {
|
|
3284
|
+
if (lastPointerTypeRef.current === event.pointerType) {
|
|
3285
|
+
lastPointerTypeRef.current = '';
|
|
3286
|
+
}
|
|
3287
|
+
if (event.pointerType === 'touch') {
|
|
3288
|
+
return;
|
|
3289
|
+
}
|
|
3290
|
+
swipePointerProps.onPointerCancel?.(event);
|
|
3291
|
+
},
|
|
3292
|
+
onTouchStart(event) {
|
|
3293
|
+
const startedFromPenPointerDown = lastPointerTypeRef.current === 'pen' && ignoreNextTouchStartFromPenRef.current;
|
|
3294
|
+
if (startedFromPenPointerDown) {
|
|
3295
|
+
ignoreNextTouchStartFromPenRef.current = false;
|
|
3296
|
+
ignoreTouchSwipeRef.current = false;
|
|
3297
|
+
touchScrollStateRef.current = null;
|
|
3298
|
+
return;
|
|
3299
|
+
}
|
|
3300
|
+
if (!open || !mounted || nestedDrawerOpen) {
|
|
3301
|
+
ignoreTouchSwipeRef.current = false;
|
|
3302
|
+
touchScrollStateRef.current = null;
|
|
3303
|
+
return;
|
|
3304
|
+
}
|
|
3305
|
+
const touch = event.touches[0];
|
|
3306
|
+
if (!touch) {
|
|
3307
|
+
return;
|
|
3308
|
+
}
|
|
3309
|
+
if (isReactTouchEventOnRangeInput(event)) {
|
|
3310
|
+
ignoreTouchSwipeRef.current = false;
|
|
3311
|
+
touchScrollStateRef.current = null;
|
|
3312
|
+
return;
|
|
3313
|
+
}
|
|
3314
|
+
const doc = ownerDocument(event.currentTarget);
|
|
3315
|
+
const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
|
|
3316
|
+
const rootElement = viewportElement ?? popupElementState;
|
|
3317
|
+
const eventTarget = getTarget(event.nativeEvent);
|
|
3318
|
+
const target = isElement(eventTarget) ? eventTarget : null;
|
|
3319
|
+
if (rootElement && target && !contains(rootElement, target)) {
|
|
3320
|
+
ignoreTouchSwipeRef.current = true;
|
|
3321
|
+
touchScrollStateRef.current = null;
|
|
3322
|
+
return;
|
|
3323
|
+
}
|
|
3324
|
+
virtualKeyboard?.onTouchStart(event);
|
|
3325
|
+
ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
|
|
3326
|
+
if (ignoreTouchSwipeRef.current) {
|
|
3327
|
+
touchScrollStateRef.current = null;
|
|
3328
|
+
return;
|
|
3329
|
+
}
|
|
3330
|
+
let scrollTarget = null;
|
|
3331
|
+
let hasCrossAxisScrollableContent = false;
|
|
3332
|
+
if (rootElement && target) {
|
|
3333
|
+
scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
|
|
3334
|
+
hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
|
|
3335
|
+
}
|
|
3336
|
+
let allowSwipe = null;
|
|
3337
|
+
if (scrollTarget) {
|
|
3338
|
+
const canSwipeFromEdge = isAtSwipeStartEdge(scrollTarget, scrollAxis, swipeDirection);
|
|
3339
|
+
allowSwipe = canSwipeFromEdge ? null : false;
|
|
3340
|
+
}
|
|
3341
|
+
touchScrollStateRef.current = {
|
|
3342
|
+
startX: touch.clientX,
|
|
3343
|
+
startY: touch.clientY,
|
|
3344
|
+
lastX: touch.clientX,
|
|
3345
|
+
lastY: touch.clientY,
|
|
3346
|
+
scrollTarget,
|
|
3347
|
+
hasCrossAxisScrollableContent,
|
|
3348
|
+
allowSwipe,
|
|
3349
|
+
preserveNativeCrossAxisScroll: false
|
|
3350
|
+
};
|
|
3351
|
+
swipeTouchProps.onTouchStart?.(event);
|
|
3352
|
+
},
|
|
3353
|
+
onTouchEnd(event) {
|
|
3354
|
+
virtualKeyboard?.onTouchEnd(event);
|
|
3355
|
+
resetTouchTrackingState();
|
|
3356
|
+
swipeTouchProps.onTouchEnd?.(event);
|
|
3357
|
+
},
|
|
3358
|
+
onTouchCancel(event) {
|
|
3359
|
+
virtualKeyboard?.onTouchCancel();
|
|
3360
|
+
resetTouchTrackingState();
|
|
3361
|
+
swipeTouchProps.onTouchCancel?.(event);
|
|
3362
|
+
},
|
|
3363
|
+
// Drawer popups use drawer-specific nested state attributes.
|
|
3364
|
+
// Suppress DialogViewport's generic nested dialog attribute.
|
|
3365
|
+
['data-nested-dialog-open']: undefined
|
|
3366
|
+
}),
|
|
3367
|
+
children: /*#__PURE__*/jsx(DrawerViewportContext.Provider, {
|
|
3368
|
+
value: swipeProviderValue,
|
|
3369
|
+
children: children
|
|
3370
|
+
})
|
|
3371
|
+
});
|
|
3372
|
+
});
|
|
3373
|
+
if (process.env.NODE_ENV !== "production") DrawerViewport.displayName = "DrawerViewport";
|
|
3374
|
+
function setSwipeDismissedElements(popupElement, backdropElement, dismissed) {
|
|
3375
|
+
if (dismissed) {
|
|
3376
|
+
popupElement?.setAttribute(DrawerPopupDataAttributes.swipeDismiss, '');
|
|
3377
|
+
backdropElement?.setAttribute(DrawerPopupDataAttributes.swipeDismiss, '');
|
|
3378
|
+
return;
|
|
3379
|
+
}
|
|
3380
|
+
popupElement?.removeAttribute(DrawerPopupDataAttributes.swipeDismiss);
|
|
3381
|
+
backdropElement?.removeAttribute(DrawerPopupDataAttributes.swipeDismiss);
|
|
3382
|
+
}
|
|
3383
|
+
function setBackdropSwipingAttribute(backdropElement, swiping) {
|
|
3384
|
+
if (!backdropElement) {
|
|
3385
|
+
return;
|
|
3386
|
+
}
|
|
3387
|
+
if (swiping) {
|
|
3388
|
+
backdropElement.setAttribute(DrawerPopupDataAttributes.swiping, '');
|
|
3389
|
+
return;
|
|
3390
|
+
}
|
|
3391
|
+
backdropElement.removeAttribute(DrawerPopupDataAttributes.swiping);
|
|
3392
|
+
}
|
|
3393
|
+
function isSwipeIgnoredTarget(target) {
|
|
3394
|
+
return Boolean(target?.closest(BASE_UI_SWIPE_IGNORE_SELECTOR));
|
|
3395
|
+
}
|
|
3396
|
+
function isDrawerContentTarget(target) {
|
|
3397
|
+
return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
|
|
3398
|
+
}
|
|
3399
|
+
function getBaseSwipeThreshold(element, direction) {
|
|
3400
|
+
const size = direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
|
|
3401
|
+
return Math.max(size * 0.5, MIN_SWIPE_THRESHOLD);
|
|
3402
|
+
}
|
|
3403
|
+
function isRangeInput(target, win) {
|
|
3404
|
+
return target instanceof win.HTMLInputElement && target.type === 'range';
|
|
3405
|
+
}
|
|
3406
|
+
function isTextSelectionControl(target) {
|
|
3407
|
+
if (!isElement(target)) {
|
|
3408
|
+
return false;
|
|
3409
|
+
}
|
|
3410
|
+
return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
|
|
3411
|
+
}
|
|
3412
|
+
function hasExpandedSelectionWithinTarget(selection, target) {
|
|
3413
|
+
const anchorElement = isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
|
|
3414
|
+
const focusElement = isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
|
|
3415
|
+
return selection.containsNode(target, true) || contains(target, anchorElement) || contains(target, focusElement);
|
|
3416
|
+
}
|
|
3417
|
+
function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
|
|
3418
|
+
const activeEl = activeElement(doc);
|
|
3419
|
+
const activeElementWithinRoot = Boolean(activeEl && contains(rootElement, activeEl));
|
|
3420
|
+
if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
|
|
3421
|
+
const {
|
|
3422
|
+
selectionStart,
|
|
3423
|
+
selectionEnd
|
|
3424
|
+
} = activeEl;
|
|
3425
|
+
if (selectionStart != null && selectionEnd != null && selectionStart < selectionEnd) {
|
|
3426
|
+
return true;
|
|
3427
|
+
}
|
|
3428
|
+
}
|
|
3429
|
+
const selection = doc.getSelection?.();
|
|
3430
|
+
if (!selection || selection.isCollapsed) {
|
|
3431
|
+
return false;
|
|
3432
|
+
}
|
|
3433
|
+
return hasExpandedSelectionWithinTarget(selection, rootElement);
|
|
3434
|
+
}
|
|
3435
|
+
function isEventOnRangeInput(event, win) {
|
|
3436
|
+
const composedPath = event.composedPath();
|
|
3437
|
+
if (composedPath) {
|
|
3438
|
+
return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
|
|
3439
|
+
}
|
|
3440
|
+
return isRangeInput(getTarget(event), win);
|
|
3441
|
+
}
|
|
3442
|
+
function isReactTouchEventOnRangeInput(event) {
|
|
3443
|
+
return isEventOnRangeInput(event.nativeEvent, getWindow(event.currentTarget));
|
|
3444
|
+
}
|
|
3445
|
+
function updateTouchScrollPosition(touchState, touch) {
|
|
3446
|
+
touchState.lastX = touch.clientX;
|
|
3447
|
+
touchState.lastY = touch.clientY;
|
|
3448
|
+
}
|
|
3449
|
+
function preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis) {
|
|
3450
|
+
if (touchState.preserveNativeCrossAxisScroll) {
|
|
3451
|
+
return true;
|
|
3452
|
+
}
|
|
3453
|
+
if (touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
|
|
3454
|
+
return false;
|
|
3455
|
+
}
|
|
3456
|
+
const drawerAxisGestureDelta = isVerticalScrollAxis ? touch.clientY - touchState.startY : touch.clientX - touchState.startX;
|
|
3457
|
+
const crossAxisGestureDelta = isVerticalScrollAxis ? touch.clientX - touchState.startX : touch.clientY - touchState.startY;
|
|
3458
|
+
const absDrawerAxisGestureDelta = Math.abs(drawerAxisGestureDelta);
|
|
3459
|
+
const absCrossAxisGestureDelta = Math.abs(crossAxisGestureDelta);
|
|
3460
|
+
if (absCrossAxisGestureDelta < 6 || absCrossAxisGestureDelta <= absDrawerAxisGestureDelta + 2) {
|
|
3461
|
+
return false;
|
|
3462
|
+
}
|
|
3463
|
+
touchState.preserveNativeCrossAxisScroll = true;
|
|
3464
|
+
return true;
|
|
3465
|
+
}
|
|
3466
|
+
function hasScrollableContentOnAxis(scrollTarget, axis) {
|
|
3467
|
+
return axis === 'vertical' ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
|
|
3468
|
+
}
|
|
3469
|
+
function getScrollMetrics(scrollTarget, axis) {
|
|
3470
|
+
if (axis === 'vertical') {
|
|
3471
|
+
const max = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
|
|
3472
|
+
return {
|
|
3473
|
+
offset: scrollTarget.scrollTop,
|
|
3474
|
+
max
|
|
3475
|
+
};
|
|
3476
|
+
}
|
|
3477
|
+
const max = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
|
|
3478
|
+
return {
|
|
3479
|
+
offset: scrollTarget.scrollLeft,
|
|
3480
|
+
max
|
|
3481
|
+
};
|
|
3482
|
+
}
|
|
3483
|
+
function isAtSwipeStartEdge(scrollTarget, axis, direction) {
|
|
3484
|
+
const {
|
|
3485
|
+
offset,
|
|
3486
|
+
max
|
|
3487
|
+
} = getScrollMetrics(scrollTarget, axis);
|
|
3488
|
+
const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
|
|
3489
|
+
if (dismissFromStartEdge === null) {
|
|
3490
|
+
return false;
|
|
3491
|
+
}
|
|
3492
|
+
return dismissFromStartEdge ? offset <= 0 : offset >= max;
|
|
3493
|
+
}
|
|
3494
|
+
function canSwipeFromScrollEdgeOnMove(scrollTarget, axis, direction, delta) {
|
|
3495
|
+
const {
|
|
3496
|
+
offset,
|
|
3497
|
+
max
|
|
3498
|
+
} = getScrollMetrics(scrollTarget, axis);
|
|
3499
|
+
const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
|
|
3500
|
+
if (dismissFromStartEdge === null) {
|
|
3501
|
+
return false;
|
|
3502
|
+
}
|
|
3503
|
+
const movingTowardDismiss = dismissFromStartEdge ? delta > 0 : delta < 0;
|
|
3504
|
+
if (!movingTowardDismiss) {
|
|
3505
|
+
return false;
|
|
3506
|
+
}
|
|
3507
|
+
return dismissFromStartEdge ? offset <= 0 : offset >= max;
|
|
3508
|
+
}
|
|
3509
|
+
function shouldDismissFromStartEdge(direction, axis) {
|
|
3510
|
+
if (axis === 'vertical') {
|
|
3511
|
+
if (direction === 'down') {
|
|
3512
|
+
return true;
|
|
3513
|
+
}
|
|
3514
|
+
if (direction === 'up') {
|
|
3515
|
+
return false;
|
|
3516
|
+
}
|
|
3517
|
+
return null;
|
|
3518
|
+
}
|
|
3519
|
+
if (direction === 'right') {
|
|
3520
|
+
return true;
|
|
3521
|
+
}
|
|
3522
|
+
if (direction === 'left') {
|
|
3523
|
+
return false;
|
|
3524
|
+
}
|
|
3525
|
+
return null;
|
|
3526
|
+
}
|
|
1422
3527
|
|
|
1423
3528
|
const ScrollAreaRootContext = /*#__PURE__*/React.createContext(undefined);
|
|
1424
3529
|
if (process.env.NODE_ENV !== "production") ScrollAreaRootContext.displayName = "ScrollAreaRootContext";
|
|
@@ -2200,4 +4305,4 @@ function mergeHiddenState(prevState, nextState) {
|
|
|
2200
4305
|
return nextState;
|
|
2201
4306
|
}
|
|
2202
4307
|
|
|
2203
|
-
export {
|
|
4308
|
+
export { getElementAtPoint as A, findScrollableTouchTarget as B, useScrollAreaRootContext as C, DrawerTrigger as D, getOffset as E, ScrollAreaRootCssVars as F, scrollAreaStateAttributesMapping as G, useScrollAreaViewportContext as H, ScrollAreaRoot as S, DrawerRoot as a, DrawerPortal as b, DrawerBackdrop as c, DrawerViewport as d, DrawerPopup as e, ScrollAreaViewport as f, DrawerContent as g, useDialogPortalContext as h, DialogStore as i, DialogRoot as j, DialogTrigger as k, DialogPortal as l, DialogViewport as m, createInitialPopupStoreState as n, useDrawerProviderContext as o, popupStoreSelectors as p, DrawerBackdropCssVars as q, DrawerPopupCssVars as r, DrawerProviderContext as s, useDrawerRootContext as t, useDialogRootContext as u, useSwipeDismiss as v, getDisplacement as w, DrawerPopupDataAttributes as x, getElementTransform as y, DrawerVirtualKeyboardContext as z };
|