@wix/site-ui 1.29.0 → 1.31.0
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/1268.js +99 -0
- package/dist/1279.js +7 -0
- package/dist/1457.js +10 -0
- package/dist/1477.js +106 -0
- package/dist/1500.js +111 -0
- package/dist/167.js +6 -0
- package/dist/2274.js +34 -0
- package/dist/2287.js +17 -0
- package/dist/2418.js +31 -0
- package/dist/2801.js +20 -0
- package/dist/285.js +86 -0
- package/dist/2861.js +6 -0
- package/dist/3020.js +7 -0
- package/dist/3021.js +72 -0
- package/dist/3056.js +229 -0
- package/dist/3140.js +4 -0
- package/dist/3248.js +307 -0
- package/dist/3296.js +4 -0
- package/dist/3319.js +400 -0
- package/dist/3395.js +4 -0
- package/dist/3485.js +854 -0
- package/dist/353.js +14 -0
- package/dist/3670.js +418 -0
- package/dist/3829.js +113 -0
- package/dist/4026.js +12 -0
- package/dist/4143.js +46 -0
- package/dist/42.js +32 -0
- package/dist/4281.js +30 -0
- package/dist/4346.js +2 -0
- package/dist/4388.js +418 -0
- package/dist/4490.js +32 -0
- package/dist/4495.js +9 -0
- package/dist/4549.js +24 -0
- package/dist/4586.js +41 -0
- package/dist/4586.js.LICENSE.txt +19 -0
- package/dist/4707.js +19 -0
- package/dist/4723.js +7 -0
- package/dist/4745.js +7 -0
- package/dist/4768.js +35 -0
- package/dist/4922.js +15 -0
- package/dist/5036.js +17 -0
- package/dist/5085.js +20 -0
- package/dist/5299.js +597 -0
- package/dist/5659.js +4 -0
- package/dist/5778.js +10 -0
- package/dist/5864.js +86 -0
- package/dist/5992.js +913 -0
- package/dist/5992.js.LICENSE.txt +19 -0
- package/dist/6003.js +10 -0
- package/dist/6046.js +29 -0
- package/dist/6089.js +2355 -0
- package/dist/6107.js +10 -0
- package/dist/6247.js +20 -0
- package/dist/6270.js +487 -0
- package/dist/6329.js +32 -0
- package/dist/6330.js +30 -0
- package/dist/6499.js +7 -0
- package/dist/6535.js +71 -0
- package/dist/6588.js +382 -0
- package/dist/6706.js +16 -0
- package/dist/6825.js +7 -0
- package/dist/6882.js +1562 -0
- package/dist/6914.js +30 -0
- package/dist/7021.js +13 -0
- package/dist/7366.js +83 -0
- package/dist/7373.js +25 -0
- package/dist/7541.js +25 -0
- package/dist/7564.js +10 -0
- package/dist/7642.js +20 -0
- package/dist/7725.js +10 -0
- package/dist/7871.js +38 -0
- package/dist/8052.js +352 -0
- package/dist/8106.js +238 -0
- package/dist/8171.js +346 -0
- package/dist/8225.js +21 -0
- package/dist/8272.js +333 -0
- package/dist/8527.js +58 -0
- package/dist/8724.js +10 -0
- package/dist/8750.js +1920 -0
- package/dist/8758.js +43 -0
- package/dist/880.js +149 -0
- package/dist/8935.js +8 -0
- package/dist/8960.js +22 -0
- package/dist/8971.js +40 -0
- package/dist/8979.js +10 -0
- package/dist/8996.js +71 -0
- package/dist/904.js +121 -0
- package/dist/9048.js +52 -0
- package/dist/9087.js +256 -0
- package/dist/9189.js +158 -0
- package/dist/9255.js +136 -0
- package/dist/9352.js +148 -0
- package/dist/951.js +22 -0
- package/dist/9635.js +22 -0
- package/dist/9829.js +4 -0
- package/dist/9863.js +8 -0
- package/dist/Accordion/index.d.ts +569 -12
- package/dist/Accordion/index.js +423 -8
- package/dist/AlertDialog/index.d.ts +1417 -18
- package/dist/AlertDialog/index.js +34 -14
- package/dist/Autocomplete/index.d.ts +1861 -38
- package/dist/Autocomplete/index.js +98 -24
- package/dist/Avatar/index.d.ts +129 -7
- package/dist/Avatar/index.js +149 -6
- package/dist/Badge/index.css +44 -0
- package/dist/Badge/index.d.ts +22 -0
- package/dist/Badge/index.js +23 -0
- package/dist/Breadcrumbs/index.d.ts +960 -7
- package/dist/Breadcrumbs/index.js +5 -5
- package/dist/Button/index.d.ts +88 -6
- package/dist/Button/index.js +27 -3
- package/dist/Checkbox/index.d.ts +425 -5
- package/dist/Checkbox/index.js +45 -5
- package/dist/CheckboxGroup/index.d.ts +318 -3
- package/dist/CheckboxGroup/index.js +166 -3
- package/dist/Collapsible/index.d.ts +377 -7
- package/dist/Collapsible/index.js +160 -6
- package/dist/Combobox/index.d.ts +1984 -48
- package/dist/Combobox/index.js +352 -29
- package/dist/ContextMenu/index.d.ts +2340 -36
- package/dist/ContextMenu/index.js +197 -22
- package/dist/Dialog/index.d.ts +1355 -18
- package/dist/Dialog/index.js +16 -14
- package/dist/Drawer/index.d.ts +1653 -18
- package/dist/Drawer/index.js +2797 -20
- package/dist/Field/index.d.ts +655 -15
- package/dist/Field/index.js +677 -10
- package/dist/Fieldset/index.d.ts +94 -5
- package/dist/Fieldset/index.js +68 -5
- package/dist/Form/index.d.ts +331 -2
- package/dist/Form/index.js +106 -3
- package/dist/Input/index.d.ts +692 -3
- package/dist/Input/index.js +10 -3
- package/dist/Menu/index.d.ts +2301 -36
- package/dist/Menu/index.js +365 -26
- package/dist/Menubar/index.d.ts +2301 -3
- package/dist/Menubar/index.js +105 -3
- package/dist/Meter/index.d.ts +175 -11
- package/dist/Meter/index.js +129 -9
- package/dist/NavigationMenu/index.d.ts +978 -28
- package/dist/NavigationMenu/index.js +1034 -17
- package/dist/NumberField/index.d.ts +612 -15
- package/dist/NumberField/index.js +1409 -11
- package/dist/Popover/index.d.ts +1655 -20
- package/dist/Popover/index.js +792 -17
- package/dist/PreviewCard/index.d.ts +1523 -14
- package/dist/PreviewCard/index.js +679 -14
- package/dist/Progress/index.d.ts +183 -11
- package/dist/Progress/index.js +181 -9
- package/dist/Radio/index.d.ts +185 -6
- package/dist/Radio/index.js +253 -6
- package/dist/RadioGroup/index.d.ts +341 -2
- package/dist/RadioGroup/index.js +154 -3
- package/dist/ScrollArea/index.d.ts +265 -13
- package/dist/ScrollArea/index.js +892 -10
- package/dist/Select/index.d.ts +1493 -38
- package/dist/Select/index.js +1824 -23
- package/dist/Separator/index.d.ts +80 -6
- package/dist/Separator/index.js +3 -3
- package/dist/Slider/index.d.ts +678 -16
- package/dist/Slider/index.js +1199 -11
- package/dist/Switch/index.d.ts +393 -5
- package/dist/Switch/index.js +208 -6
- package/dist/Tabs/index.d.ts +523 -12
- package/dist/Tabs/index.js +685 -9
- package/dist/Toggle/index.d.ts +305 -2
- package/dist/Toggle/index.js +76 -3
- package/dist/ToggleGroup/index.d.ts +316 -2
- package/dist/ToggleGroup/index.js +102 -3
- package/dist/Toolbar/index.d.ts +282 -13
- package/dist/Toolbar/index.js +230 -9
- package/dist/Tooltip/index.d.ts +1572 -14
- package/dist/Tooltip/index.js +965 -14
- package/dist/index.d.ts +12758 -646
- package/dist/index.js +1 -0
- package/dist/rslib-runtime.js +18 -0
- package/package.json +3 -3
package/dist/Drawer/index.js
CHANGED
|
@@ -1,72 +1,2849 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Drawer } from "@base-ui/react/drawer";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
2
|
import clsx from "clsx";
|
|
3
|
+
import { BASE_UI_SWIPE_IGNORE_SELECTOR, popupStateMapping, popupStateMapping_CommonPopupDataAttributes } from "../4388.js";
|
|
4
|
+
import { transitionStatusMapping, stateAttributesMapping_TransitionStatusDataAttributes, useOpenChangeComplete } from "../880.js";
|
|
5
|
+
import { IsDrawerContext, DialogClose_DialogClose, useDialogPortalContext, useDialogRootContext, DialogTitle_DialogTitle, DialogTrigger_DialogTrigger, DialogDescription_DialogDescription, DialogHandle, createDialogHandle, DialogViewport_DialogViewport, DialogPortal_DialogPortal } from "../6270.js";
|
|
6
|
+
import { EMPTY_OBJECT, mergeProps, useRenderElement, esm_formatErrorMessage } from "../8272.js";
|
|
7
|
+
import { useIsoLayoutEffect, SafeReact } from "../6499.js";
|
|
8
|
+
import { clamp } from "../3296.js";
|
|
9
|
+
import { useStableCallback } from "../7541.js";
|
|
10
|
+
import { ownerDocument } from "../9829.js";
|
|
11
|
+
import { error as error_error } from "../4026.js";
|
|
12
|
+
import { FOCUSABLE_POPUP_PROPS, useTriggerRegistration } from "../8106.js";
|
|
13
|
+
import { COMPOSITE_KEYS } from "../1500.js";
|
|
14
|
+
import { FloatingFocusManager } from "../3485.js";
|
|
15
|
+
import { getWindow, getComputedStyle as floating_ui_utils_dom_getComputedStyle, isElement, isHTMLElement } from "../3829.js";
|
|
16
|
+
import { getTarget, contains, activeElement } from "../4549.js";
|
|
17
|
+
import { useTimeout } from "../42.js";
|
|
18
|
+
import { useBaseUiId, useId } from "../6046.js";
|
|
19
|
+
import { createChangeEventDetails } from "../4768.js";
|
|
20
|
+
import { useAnimationFrame } from "../8996.js";
|
|
21
|
+
import { addEventListener } from "../4723.js";
|
|
22
|
+
import { useControlled } from "../8527.js";
|
|
23
|
+
import { DialogRoot } from "../3020.js";
|
|
24
|
+
import { isAndroid } from "../8971.js";
|
|
25
|
+
import { closeWatcher as reason_parts_closeWatcher } from "../2418.js";
|
|
4
26
|
import * as __rspack_external_react from "react";
|
|
27
|
+
import * as __rspack_external_react_dom_7136dc57 from "react-dom";
|
|
28
|
+
let DrawerPopupCssVars_DrawerPopupCssVars = /*#__PURE__*/ function(DrawerPopupCssVars) {
|
|
29
|
+
DrawerPopupCssVars["nestedDrawers"] = "--nested-drawers";
|
|
30
|
+
DrawerPopupCssVars["height"] = "--drawer-height";
|
|
31
|
+
DrawerPopupCssVars["frontmostHeight"] = "--drawer-frontmost-height";
|
|
32
|
+
DrawerPopupCssVars["swipeMovementX"] = "--drawer-swipe-movement-x";
|
|
33
|
+
DrawerPopupCssVars["swipeMovementY"] = "--drawer-swipe-movement-y";
|
|
34
|
+
DrawerPopupCssVars["snapPointOffset"] = "--drawer-snap-point-offset";
|
|
35
|
+
DrawerPopupCssVars["swipeStrength"] = "--drawer-swipe-strength";
|
|
36
|
+
return DrawerPopupCssVars;
|
|
37
|
+
}({});
|
|
38
|
+
let DrawerBackdropCssVars_DrawerBackdropCssVars = /*#__PURE__*/ function(DrawerBackdropCssVars) {
|
|
39
|
+
DrawerBackdropCssVars["swipeProgress"] = "--drawer-swipe-progress";
|
|
40
|
+
return DrawerBackdropCssVars;
|
|
41
|
+
}({});
|
|
42
|
+
const stateAttributesMapping = {
|
|
43
|
+
...popupStateMapping,
|
|
44
|
+
...transitionStatusMapping
|
|
45
|
+
};
|
|
46
|
+
const DrawerBackdrop_DrawerBackdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
47
|
+
const { render, className, style, forceRender = false, ...elementProps } = componentProps;
|
|
48
|
+
const { store } = useDialogRootContext();
|
|
49
|
+
const open = store.useState('open');
|
|
50
|
+
const nested = store.useState('nested');
|
|
51
|
+
const mounted = store.useState('mounted');
|
|
52
|
+
const transitionStatus = store.useState('transitionStatus');
|
|
53
|
+
const state = {
|
|
54
|
+
open,
|
|
55
|
+
transitionStatus
|
|
56
|
+
};
|
|
57
|
+
return useRenderElement('div', componentProps, {
|
|
58
|
+
state,
|
|
59
|
+
ref: [
|
|
60
|
+
store.context.backdropRef,
|
|
61
|
+
forwardedRef
|
|
62
|
+
],
|
|
63
|
+
stateAttributesMapping: stateAttributesMapping,
|
|
64
|
+
props: [
|
|
65
|
+
{
|
|
66
|
+
role: 'presentation',
|
|
67
|
+
hidden: !mounted,
|
|
68
|
+
style: {
|
|
69
|
+
pointerEvents: open ? void 0 : 'none',
|
|
70
|
+
userSelect: 'none',
|
|
71
|
+
WebkitUserSelect: 'none',
|
|
72
|
+
[DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress]: '0',
|
|
73
|
+
[DrawerPopupCssVars_DrawerPopupCssVars.swipeStrength]: '1'
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
elementProps
|
|
77
|
+
],
|
|
78
|
+
enabled: forceRender || !nested
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
if ("production" !== process.env.NODE_ENV) DrawerBackdrop_DrawerBackdrop.displayName = "DrawerBackdrop";
|
|
82
|
+
const DRAWER_CONTENT_ATTRIBUTE = 'data-drawer-content';
|
|
83
|
+
const DrawerContent_DrawerContent = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
84
|
+
const { render, className, style, ...elementProps } = componentProps;
|
|
85
|
+
useDialogRootContext();
|
|
86
|
+
return useRenderElement('div', componentProps, {
|
|
87
|
+
ref: forwardedRef,
|
|
88
|
+
props: [
|
|
89
|
+
{
|
|
90
|
+
[DRAWER_CONTENT_ATTRIBUTE]: ''
|
|
91
|
+
},
|
|
92
|
+
elementProps
|
|
93
|
+
]
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
if ("production" !== process.env.NODE_ENV) DrawerContent_DrawerContent.displayName = "DrawerContent";
|
|
97
|
+
const DrawerProviderContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
|
|
98
|
+
if ("production" !== process.env.NODE_ENV) DrawerProviderContext.displayName = "DrawerProviderContext";
|
|
99
|
+
function useDrawerProviderContext(optional) {
|
|
100
|
+
const context = __rspack_external_react.useContext(DrawerProviderContext);
|
|
101
|
+
if (false === optional && void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: DrawerProviderContext is missing. Use <Drawer.Provider>.' : esm_formatErrorMessage(91));
|
|
102
|
+
return context;
|
|
103
|
+
}
|
|
104
|
+
const DrawerIndent_stateAttributesMapping = {
|
|
105
|
+
active (value) {
|
|
106
|
+
if (value) return {
|
|
107
|
+
'data-active': ''
|
|
108
|
+
};
|
|
109
|
+
return {
|
|
110
|
+
'data-inactive': ''
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
const DrawerIndent_DrawerIndent = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
115
|
+
const { render, className, style, ...elementProps } = componentProps;
|
|
116
|
+
const providerContext = useDrawerProviderContext(true);
|
|
117
|
+
const active = providerContext?.active ?? false;
|
|
118
|
+
const visualStateStore = providerContext?.visualStateStore;
|
|
119
|
+
const indentRef = __rspack_external_react.useRef(null);
|
|
120
|
+
useIsoLayoutEffect(()=>{
|
|
121
|
+
const element = indentRef.current;
|
|
122
|
+
if (!element || !visualStateStore) return;
|
|
123
|
+
const syncVisualState = ()=>{
|
|
124
|
+
const { swipeProgress, frontmostHeight } = visualStateStore.getSnapshot();
|
|
125
|
+
if (swipeProgress <= 0) element.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, '0');
|
|
126
|
+
else element.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
|
|
127
|
+
if (frontmostHeight <= 0) element.style.removeProperty(DrawerPopupCssVars_DrawerPopupCssVars.height);
|
|
128
|
+
else element.style.setProperty(DrawerPopupCssVars_DrawerPopupCssVars.height, `${frontmostHeight}px`);
|
|
129
|
+
};
|
|
130
|
+
syncVisualState();
|
|
131
|
+
const unsubscribe = visualStateStore.subscribe(syncVisualState);
|
|
132
|
+
return ()=>{
|
|
133
|
+
unsubscribe();
|
|
134
|
+
element.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, '0');
|
|
135
|
+
element.style.removeProperty(DrawerPopupCssVars_DrawerPopupCssVars.height);
|
|
136
|
+
};
|
|
137
|
+
}, [
|
|
138
|
+
visualStateStore
|
|
139
|
+
]);
|
|
140
|
+
const state = {
|
|
141
|
+
active
|
|
142
|
+
};
|
|
143
|
+
return useRenderElement('div', componentProps, {
|
|
144
|
+
ref: [
|
|
145
|
+
forwardedRef,
|
|
146
|
+
indentRef
|
|
147
|
+
],
|
|
148
|
+
state,
|
|
149
|
+
props: [
|
|
150
|
+
{
|
|
151
|
+
style: {
|
|
152
|
+
[DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress]: '0'
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
elementProps
|
|
156
|
+
],
|
|
157
|
+
stateAttributesMapping: DrawerIndent_stateAttributesMapping
|
|
158
|
+
});
|
|
159
|
+
});
|
|
160
|
+
if ("production" !== process.env.NODE_ENV) DrawerIndent_DrawerIndent.displayName = "DrawerIndent";
|
|
161
|
+
const DrawerIndentBackground_stateAttributesMapping = {
|
|
162
|
+
active (value) {
|
|
163
|
+
if (value) return {
|
|
164
|
+
'data-active': ''
|
|
165
|
+
};
|
|
166
|
+
return {
|
|
167
|
+
'data-inactive': ''
|
|
168
|
+
};
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
const DrawerIndentBackground_DrawerIndentBackground = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
172
|
+
const { render, className, style, ...elementProps } = componentProps;
|
|
173
|
+
const providerContext = useDrawerProviderContext(true);
|
|
174
|
+
const active = providerContext?.active ?? false;
|
|
175
|
+
const state = {
|
|
176
|
+
active
|
|
177
|
+
};
|
|
178
|
+
return useRenderElement('div', componentProps, {
|
|
179
|
+
ref: forwardedRef,
|
|
180
|
+
state,
|
|
181
|
+
props: elementProps,
|
|
182
|
+
stateAttributesMapping: DrawerIndentBackground_stateAttributesMapping
|
|
183
|
+
});
|
|
184
|
+
});
|
|
185
|
+
if ("production" !== process.env.NODE_ENV) DrawerIndentBackground_DrawerIndentBackground.displayName = "DrawerIndentBackground";
|
|
186
|
+
let DrawerPopupDataAttributes_DrawerPopupDataAttributes = function(DrawerPopupDataAttributes) {
|
|
187
|
+
DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = popupStateMapping_CommonPopupDataAttributes.open] = "open";
|
|
188
|
+
DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = popupStateMapping_CommonPopupDataAttributes.closed] = "closed";
|
|
189
|
+
DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = popupStateMapping_CommonPopupDataAttributes.startingStyle] = "startingStyle";
|
|
190
|
+
DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = popupStateMapping_CommonPopupDataAttributes.endingStyle] = "endingStyle";
|
|
191
|
+
DrawerPopupDataAttributes["expanded"] = "data-expanded";
|
|
192
|
+
DrawerPopupDataAttributes["nestedDrawerOpen"] = "data-nested-drawer-open";
|
|
193
|
+
DrawerPopupDataAttributes["nestedDrawerSwiping"] = "data-nested-drawer-swiping";
|
|
194
|
+
DrawerPopupDataAttributes["swipeDismiss"] = "data-swipe-dismiss";
|
|
195
|
+
DrawerPopupDataAttributes["swipeDirection"] = "data-swipe-direction";
|
|
196
|
+
DrawerPopupDataAttributes["swiping"] = "data-swiping";
|
|
197
|
+
return DrawerPopupDataAttributes;
|
|
198
|
+
}({});
|
|
199
|
+
const DrawerRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
|
|
200
|
+
if ("production" !== process.env.NODE_ENV) DrawerRootContext.displayName = "DrawerRootContext";
|
|
201
|
+
function useDrawerRootContext(optional) {
|
|
202
|
+
const drawerRootContext = __rspack_external_react.useContext(DrawerRootContext);
|
|
203
|
+
if (false === optional && void 0 === drawerRootContext) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: DrawerRootContext is missing. Drawer parts must be placed within <Drawer.Root>.' : esm_formatErrorMessage(90));
|
|
204
|
+
return drawerRootContext;
|
|
205
|
+
}
|
|
206
|
+
function resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {
|
|
207
|
+
if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) return null;
|
|
208
|
+
if ('number' == typeof snapPoint) {
|
|
209
|
+
if (!Number.isFinite(snapPoint)) return null;
|
|
210
|
+
if (snapPoint <= 1) return clamp(snapPoint, 0, 1) * viewportHeight;
|
|
211
|
+
return snapPoint;
|
|
212
|
+
}
|
|
213
|
+
const trimmed = snapPoint.trim();
|
|
214
|
+
if (trimmed.endsWith('px')) {
|
|
215
|
+
const value = Number.parseFloat(trimmed);
|
|
216
|
+
return Number.isFinite(value) ? value : null;
|
|
217
|
+
}
|
|
218
|
+
if (trimmed.endsWith('rem')) {
|
|
219
|
+
const value = Number.parseFloat(trimmed);
|
|
220
|
+
return Number.isFinite(value) ? value * rootFontSize : null;
|
|
221
|
+
}
|
|
222
|
+
return null;
|
|
223
|
+
}
|
|
224
|
+
function findClosestSnapPoint(height, points) {
|
|
225
|
+
let closest = null;
|
|
226
|
+
let closestDistance = 1 / 0;
|
|
227
|
+
for (const point of points){
|
|
228
|
+
const distance = Math.abs(point.height - height);
|
|
229
|
+
if (distance < closestDistance) {
|
|
230
|
+
closestDistance = distance;
|
|
231
|
+
closest = point;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
return closest;
|
|
235
|
+
}
|
|
236
|
+
function useDrawerSnapPoints() {
|
|
237
|
+
const { store } = useDialogRootContext();
|
|
238
|
+
const { snapPoints, activeSnapPoint, setActiveSnapPoint, popupHeight } = useDrawerRootContext();
|
|
239
|
+
const viewportElement = store.useState('viewportElement');
|
|
240
|
+
const [viewportHeight, setViewportHeight] = __rspack_external_react.useState(0);
|
|
241
|
+
const [rootFontSize, setRootFontSize] = __rspack_external_react.useState(16);
|
|
242
|
+
const measureViewportHeight = useStableCallback(()=>{
|
|
243
|
+
const doc = ownerDocument(viewportElement);
|
|
244
|
+
const html = doc.documentElement;
|
|
245
|
+
if (viewportElement) setViewportHeight(viewportElement.offsetHeight);
|
|
246
|
+
if (!viewportElement) setViewportHeight(html.clientHeight);
|
|
247
|
+
const fontSize = parseFloat(getComputedStyle(html).fontSize);
|
|
248
|
+
if (Number.isFinite(fontSize)) setRootFontSize(fontSize);
|
|
249
|
+
});
|
|
250
|
+
useIsoLayoutEffect(()=>{
|
|
251
|
+
measureViewportHeight();
|
|
252
|
+
if (!viewportElement || 'function' != typeof ResizeObserver) return;
|
|
253
|
+
const resizeObserver = new ResizeObserver(measureViewportHeight);
|
|
254
|
+
resizeObserver.observe(viewportElement);
|
|
255
|
+
return ()=>{
|
|
256
|
+
resizeObserver.disconnect();
|
|
257
|
+
};
|
|
258
|
+
}, [
|
|
259
|
+
measureViewportHeight,
|
|
260
|
+
viewportElement
|
|
261
|
+
]);
|
|
262
|
+
const resolvedSnapPoints = __rspack_external_react.useMemo(()=>{
|
|
263
|
+
if (!snapPoints || 0 === snapPoints.length || viewportHeight <= 0 || popupHeight <= 0) return [];
|
|
264
|
+
const maxHeight = Math.min(popupHeight, viewportHeight);
|
|
265
|
+
if (!Number.isFinite(maxHeight) || maxHeight <= 0) return [];
|
|
266
|
+
const resolved = snapPoints.map((value)=>{
|
|
267
|
+
const resolvedHeight = resolveSnapPointValue(value, viewportHeight, rootFontSize);
|
|
268
|
+
if (null === resolvedHeight || !Number.isFinite(resolvedHeight)) return null;
|
|
269
|
+
const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
|
|
270
|
+
return {
|
|
271
|
+
value,
|
|
272
|
+
height: clampedHeight,
|
|
273
|
+
offset: Math.max(0, popupHeight - clampedHeight)
|
|
274
|
+
};
|
|
275
|
+
}).filter((point)=>Boolean(point));
|
|
276
|
+
if (resolved.length <= 1) return resolved;
|
|
277
|
+
const deduped = [];
|
|
278
|
+
const seenHeights = [];
|
|
279
|
+
for(let index = resolved.length - 1; index >= 0; index -= 1){
|
|
280
|
+
const point = resolved[index];
|
|
281
|
+
const isDuplicate = seenHeights.some((height)=>Math.abs(height - point.height) <= 1);
|
|
282
|
+
if (!isDuplicate) {
|
|
283
|
+
seenHeights.push(point.height);
|
|
284
|
+
deduped.push(point);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
deduped.reverse();
|
|
288
|
+
return deduped;
|
|
289
|
+
}, [
|
|
290
|
+
popupHeight,
|
|
291
|
+
rootFontSize,
|
|
292
|
+
snapPoints,
|
|
293
|
+
viewportHeight
|
|
294
|
+
]);
|
|
295
|
+
const resolvedActiveSnapPoint = __rspack_external_react.useMemo(()=>{
|
|
296
|
+
if (void 0 === activeSnapPoint) return resolvedSnapPoints[0];
|
|
297
|
+
if (null === activeSnapPoint) return;
|
|
298
|
+
const exactMatch = resolvedSnapPoints.find((point)=>Object.is(point.value, activeSnapPoint));
|
|
299
|
+
if (exactMatch) return exactMatch;
|
|
300
|
+
const maxHeight = Math.min(popupHeight, viewportHeight);
|
|
301
|
+
const resolvedHeight = resolveSnapPointValue(activeSnapPoint, viewportHeight, rootFontSize);
|
|
302
|
+
if (null === resolvedHeight || !Number.isFinite(resolvedHeight)) return;
|
|
303
|
+
const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
|
|
304
|
+
return findClosestSnapPoint(clampedHeight, resolvedSnapPoints) ?? void 0;
|
|
305
|
+
}, [
|
|
306
|
+
activeSnapPoint,
|
|
307
|
+
popupHeight,
|
|
308
|
+
resolvedSnapPoints,
|
|
309
|
+
rootFontSize,
|
|
310
|
+
viewportHeight
|
|
311
|
+
]);
|
|
312
|
+
return {
|
|
313
|
+
snapPoints,
|
|
314
|
+
activeSnapPoint,
|
|
315
|
+
setActiveSnapPoint,
|
|
316
|
+
popupHeight,
|
|
317
|
+
viewportHeight,
|
|
318
|
+
resolvedSnapPoints,
|
|
319
|
+
activeSnapPointOffset: resolvedActiveSnapPoint?.offset ?? null
|
|
320
|
+
};
|
|
321
|
+
}
|
|
322
|
+
const DrawerViewportContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
|
|
323
|
+
if ("production" !== process.env.NODE_ENV) DrawerViewportContext.displayName = "DrawerViewportContext";
|
|
324
|
+
function useDrawerViewportContext(optional) {
|
|
325
|
+
const context = __rspack_external_react.useContext(DrawerViewportContext);
|
|
326
|
+
if (false === optional && null === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: DrawerViewportContext is missing. Drawer parts must be placed within <Drawer.Viewport>.' : esm_formatErrorMessage(92));
|
|
327
|
+
return context;
|
|
328
|
+
}
|
|
329
|
+
let drawerSwipeVarsRegistered = false;
|
|
330
|
+
function removeCSSVariableInheritance() {
|
|
331
|
+
if (drawerSwipeVarsRegistered) return;
|
|
332
|
+
if ("u" > typeof CSS && 'registerProperty' in CSS) {
|
|
333
|
+
[
|
|
334
|
+
DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementX,
|
|
335
|
+
DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementY,
|
|
336
|
+
DrawerPopupCssVars_DrawerPopupCssVars.snapPointOffset
|
|
337
|
+
].forEach((name)=>{
|
|
338
|
+
try {
|
|
339
|
+
CSS.registerProperty({
|
|
340
|
+
name,
|
|
341
|
+
syntax: '<length>',
|
|
342
|
+
inherits: false,
|
|
343
|
+
initialValue: '0px'
|
|
344
|
+
});
|
|
345
|
+
} catch {}
|
|
346
|
+
});
|
|
347
|
+
[
|
|
348
|
+
{
|
|
349
|
+
name: DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress,
|
|
350
|
+
initialValue: '0'
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
name: DrawerPopupCssVars_DrawerPopupCssVars.swipeStrength,
|
|
354
|
+
initialValue: '1'
|
|
355
|
+
}
|
|
356
|
+
].forEach(({ name, initialValue })=>{
|
|
357
|
+
try {
|
|
358
|
+
CSS.registerProperty({
|
|
359
|
+
name,
|
|
360
|
+
syntax: '<number>',
|
|
361
|
+
inherits: false,
|
|
362
|
+
initialValue
|
|
363
|
+
});
|
|
364
|
+
} catch {}
|
|
365
|
+
});
|
|
366
|
+
}
|
|
367
|
+
drawerSwipeVarsRegistered = true;
|
|
368
|
+
}
|
|
369
|
+
const DrawerPopup_stateAttributesMapping = {
|
|
370
|
+
...popupStateMapping,
|
|
371
|
+
...transitionStatusMapping,
|
|
372
|
+
expanded (value) {
|
|
373
|
+
return value ? {
|
|
374
|
+
[DrawerPopupDataAttributes_DrawerPopupDataAttributes.expanded]: ''
|
|
375
|
+
} : null;
|
|
376
|
+
},
|
|
377
|
+
nestedDrawerOpen (value) {
|
|
378
|
+
return value ? {
|
|
379
|
+
[DrawerPopupDataAttributes_DrawerPopupDataAttributes.nestedDrawerOpen]: ''
|
|
380
|
+
} : null;
|
|
381
|
+
},
|
|
382
|
+
nestedDrawerSwiping (value) {
|
|
383
|
+
return value ? {
|
|
384
|
+
[DrawerPopupDataAttributes_DrawerPopupDataAttributes.nestedDrawerSwiping]: ''
|
|
385
|
+
} : null;
|
|
386
|
+
},
|
|
387
|
+
swipeDirection (value) {
|
|
388
|
+
return value ? {
|
|
389
|
+
[DrawerPopupDataAttributes_DrawerPopupDataAttributes.swipeDirection]: value
|
|
390
|
+
} : null;
|
|
391
|
+
},
|
|
392
|
+
swiping (value) {
|
|
393
|
+
return value ? {
|
|
394
|
+
[DrawerPopupDataAttributes_DrawerPopupDataAttributes.swiping]: ''
|
|
395
|
+
} : null;
|
|
396
|
+
}
|
|
397
|
+
};
|
|
398
|
+
const DrawerPopup_DrawerPopup = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
399
|
+
const { render, className, style, finalFocus, initialFocus, ...elementProps } = componentProps;
|
|
400
|
+
const { store } = useDialogRootContext();
|
|
401
|
+
const { swipeDirection, frontmostHeight, hasNestedDrawer, nestedSwiping, nestedSwipeProgressStore, onPopupHeightChange, notifyParentFrontmostHeight, notifyParentHasNestedDrawer } = useDrawerRootContext();
|
|
402
|
+
const descriptionElementId = store.useState("descriptionElementId");
|
|
403
|
+
const disablePointerDismissal = store.useState('disablePointerDismissal');
|
|
404
|
+
const floatingRootContext = store.useState('floatingRootContext');
|
|
405
|
+
const rootPopupProps = store.useState('popupProps');
|
|
406
|
+
const modal = store.useState('modal');
|
|
407
|
+
const mounted = store.useState('mounted');
|
|
408
|
+
const nested = store.useState('nested');
|
|
409
|
+
const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
|
|
410
|
+
const transitionStatus = store.useState('transitionStatus');
|
|
411
|
+
const open = store.useState('open');
|
|
412
|
+
const openMethod = store.useState('openMethod');
|
|
413
|
+
const titleElementId = store.useState('titleElementId');
|
|
414
|
+
const role = store.useState('role');
|
|
415
|
+
const floatingId = floatingRootContext.useState('floatingId');
|
|
416
|
+
const popupId = elementProps.id ?? floatingId;
|
|
417
|
+
const swipe = useDrawerViewportContext(true);
|
|
418
|
+
useDialogPortalContext();
|
|
419
|
+
const { snapPoints, activeSnapPoint, activeSnapPointOffset } = useDrawerSnapPoints();
|
|
420
|
+
const nestedDrawerOpen = nestedOpenDrawerCount > 0;
|
|
421
|
+
const swiping = swipe?.swiping ?? false;
|
|
422
|
+
const swipeStrength = swipe?.swipeStrength ?? null;
|
|
423
|
+
const [popupHeight, setPopupHeight] = __rspack_external_react.useState(0);
|
|
424
|
+
const popupHeightRef = __rspack_external_react.useRef(0);
|
|
425
|
+
if ('production' !== process.env.NODE_ENV) __rspack_external_react.useEffect(()=>{
|
|
426
|
+
if (swipe) return;
|
|
427
|
+
const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
|
|
428
|
+
const message = "<Drawer.Popup> expected to be rendered within <Drawer.Viewport>. Omitting the viewport disables drawer swipe handling and touch scroll locking. Wrap <Drawer.Popup> in <Drawer.Viewport>.";
|
|
429
|
+
error_error(`${message}${ownerStackMessage}`);
|
|
430
|
+
}, [
|
|
431
|
+
swipe
|
|
432
|
+
]);
|
|
433
|
+
const measureHeight = useStableCallback(()=>{
|
|
434
|
+
const popupElement = store.context.popupRef.current;
|
|
435
|
+
if (!popupElement) return;
|
|
436
|
+
const offsetHeight = popupElement.offsetHeight;
|
|
437
|
+
if (popupHeightRef.current > 0 && frontmostHeight > popupHeightRef.current && offsetHeight > popupHeightRef.current) return;
|
|
438
|
+
const keepHeightWhileNested = popupHeightRef.current > 0 && hasNestedDrawer;
|
|
439
|
+
if (keepHeightWhileNested) {
|
|
440
|
+
const oldHeight = popupHeightRef.current;
|
|
441
|
+
setPopupHeight(oldHeight);
|
|
442
|
+
onPopupHeightChange(oldHeight);
|
|
443
|
+
return;
|
|
444
|
+
}
|
|
445
|
+
const nextHeight = offsetHeight;
|
|
446
|
+
if (nextHeight === popupHeightRef.current) return;
|
|
447
|
+
popupHeightRef.current = nextHeight;
|
|
448
|
+
setPopupHeight(nextHeight);
|
|
449
|
+
onPopupHeightChange(nextHeight);
|
|
450
|
+
});
|
|
451
|
+
useIsoLayoutEffect(()=>{
|
|
452
|
+
if (!mounted) {
|
|
453
|
+
popupHeightRef.current = 0;
|
|
454
|
+
setPopupHeight(0);
|
|
455
|
+
onPopupHeightChange(0);
|
|
456
|
+
return;
|
|
457
|
+
}
|
|
458
|
+
const popupElement = store.context.popupRef.current;
|
|
459
|
+
if (!popupElement) return;
|
|
460
|
+
removeCSSVariableInheritance();
|
|
461
|
+
measureHeight();
|
|
462
|
+
if ('function' != typeof ResizeObserver) return;
|
|
463
|
+
const resizeObserver = new ResizeObserver(measureHeight);
|
|
464
|
+
resizeObserver.observe(popupElement);
|
|
465
|
+
return ()=>{
|
|
466
|
+
resizeObserver.disconnect();
|
|
467
|
+
};
|
|
468
|
+
}, [
|
|
469
|
+
measureHeight,
|
|
470
|
+
mounted,
|
|
471
|
+
nestedDrawerOpen,
|
|
472
|
+
onPopupHeightChange,
|
|
473
|
+
store.context.popupRef
|
|
474
|
+
]);
|
|
475
|
+
useIsoLayoutEffect(()=>{
|
|
476
|
+
const popupRef = store.context.popupRef;
|
|
477
|
+
const syncNestedSwipeProgress = ()=>{
|
|
478
|
+
const popupElement = popupRef.current;
|
|
479
|
+
if (!popupElement) return;
|
|
480
|
+
const progress = nestedSwipeProgressStore.getSnapshot();
|
|
481
|
+
if (progress > 0) popupElement.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, `${progress}`);
|
|
482
|
+
else popupElement.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, '0');
|
|
483
|
+
};
|
|
484
|
+
syncNestedSwipeProgress();
|
|
485
|
+
const unsubscribe = nestedSwipeProgressStore.subscribe(syncNestedSwipeProgress);
|
|
486
|
+
return ()=>{
|
|
487
|
+
unsubscribe();
|
|
488
|
+
const popupElement = popupRef.current;
|
|
489
|
+
if (popupElement) popupElement.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, '0');
|
|
490
|
+
};
|
|
491
|
+
}, [
|
|
492
|
+
nestedSwipeProgressStore,
|
|
493
|
+
store.context.popupRef
|
|
494
|
+
]);
|
|
495
|
+
__rspack_external_react.useEffect(()=>{
|
|
496
|
+
if (!open) return;
|
|
497
|
+
notifyParentFrontmostHeight?.(frontmostHeight);
|
|
498
|
+
return ()=>{
|
|
499
|
+
notifyParentFrontmostHeight?.(0);
|
|
500
|
+
};
|
|
501
|
+
}, [
|
|
502
|
+
frontmostHeight,
|
|
503
|
+
open,
|
|
504
|
+
notifyParentFrontmostHeight
|
|
505
|
+
]);
|
|
506
|
+
__rspack_external_react.useEffect(()=>{
|
|
507
|
+
if (!notifyParentHasNestedDrawer) return;
|
|
508
|
+
const present = open || 'ending' === transitionStatus;
|
|
509
|
+
notifyParentHasNestedDrawer(present);
|
|
510
|
+
return ()=>{
|
|
511
|
+
notifyParentHasNestedDrawer(false);
|
|
512
|
+
};
|
|
513
|
+
}, [
|
|
514
|
+
notifyParentHasNestedDrawer,
|
|
515
|
+
open,
|
|
516
|
+
transitionStatus
|
|
517
|
+
]);
|
|
518
|
+
useOpenChangeComplete({
|
|
519
|
+
open,
|
|
520
|
+
ref: store.context.popupRef,
|
|
521
|
+
onComplete () {
|
|
522
|
+
if (open) store.context.onOpenChangeComplete?.(true);
|
|
523
|
+
}
|
|
524
|
+
});
|
|
525
|
+
const resolvedInitialFocus = void 0 === initialFocus ? store.context.popupRef : initialFocus;
|
|
526
|
+
const setPopupElement = store.useStateSetter('popupElement');
|
|
527
|
+
const state = {
|
|
528
|
+
open,
|
|
529
|
+
nested,
|
|
530
|
+
transitionStatus,
|
|
531
|
+
expanded: 1 === activeSnapPoint,
|
|
532
|
+
nestedDrawerOpen,
|
|
533
|
+
nestedDrawerSwiping: nestedSwiping,
|
|
534
|
+
swipeDirection,
|
|
535
|
+
swiping
|
|
536
|
+
};
|
|
537
|
+
let popupHeightCssVarValue;
|
|
538
|
+
const shouldUseAutoHeight = !hasNestedDrawer && 'ending' !== transitionStatus;
|
|
539
|
+
if (popupHeight && !shouldUseAutoHeight) popupHeightCssVarValue = `${popupHeight}px`;
|
|
540
|
+
const shouldApplySnapPoints = snapPoints && snapPoints.length > 0 && ('down' === swipeDirection || 'up' === swipeDirection);
|
|
541
|
+
let snapPointOffsetValue = null;
|
|
542
|
+
if (shouldApplySnapPoints && null !== activeSnapPointOffset) snapPointOffsetValue = 'up' === swipeDirection ? -activeSnapPointOffset : activeSnapPointOffset;
|
|
543
|
+
let dragStyles = swipe ? swipe.getDragStyles() : EMPTY_OBJECT;
|
|
544
|
+
if (shouldApplySnapPoints && 'down' === swipeDirection) {
|
|
545
|
+
const baseOffset = activeSnapPointOffset ?? 0;
|
|
546
|
+
const movementValue = Number.parseFloat(String(dragStyles[DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementY] ?? 0));
|
|
547
|
+
const nextOffset = Number.isFinite(movementValue) ? baseOffset + movementValue : baseOffset;
|
|
548
|
+
const shouldDamp = nextOffset < 0;
|
|
549
|
+
if (swiping && shouldDamp && Number.isFinite(movementValue)) {
|
|
550
|
+
const overshoot = Math.abs(nextOffset);
|
|
551
|
+
const dampedOffset = -Math.sqrt(overshoot);
|
|
552
|
+
const dampedMovement = dampedOffset - baseOffset;
|
|
553
|
+
dragStyles = {
|
|
554
|
+
...dragStyles,
|
|
555
|
+
transform: void 0,
|
|
556
|
+
[DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementY]: `${dampedMovement}px`
|
|
557
|
+
};
|
|
558
|
+
} else dragStyles = {
|
|
559
|
+
...dragStyles,
|
|
560
|
+
transform: void 0
|
|
561
|
+
};
|
|
562
|
+
}
|
|
563
|
+
const element = useRenderElement('div', componentProps, {
|
|
564
|
+
state,
|
|
565
|
+
props: [
|
|
566
|
+
rootPopupProps,
|
|
567
|
+
{
|
|
568
|
+
id: popupId,
|
|
569
|
+
'aria-labelledby': titleElementId,
|
|
570
|
+
'aria-describedby': descriptionElementId,
|
|
571
|
+
role,
|
|
572
|
+
...FOCUSABLE_POPUP_PROPS,
|
|
573
|
+
hidden: !mounted,
|
|
574
|
+
onKeyDown (event) {
|
|
575
|
+
if (COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
|
|
576
|
+
},
|
|
577
|
+
style: {
|
|
578
|
+
...dragStyles,
|
|
579
|
+
[DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress]: '0',
|
|
580
|
+
[DrawerPopupCssVars_DrawerPopupCssVars.nestedDrawers]: nestedOpenDrawerCount,
|
|
581
|
+
[DrawerPopupCssVars_DrawerPopupCssVars.height]: popupHeightCssVarValue,
|
|
582
|
+
[DrawerPopupCssVars_DrawerPopupCssVars.snapPointOffset]: 'number' == typeof snapPointOffsetValue ? `${snapPointOffsetValue}px` : '0px',
|
|
583
|
+
[DrawerPopupCssVars_DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : void 0,
|
|
584
|
+
[DrawerPopupCssVars_DrawerPopupCssVars.swipeStrength]: 'number' == typeof swipeStrength && Number.isFinite(swipeStrength) && swipeStrength > 0 ? `${swipeStrength}` : '1'
|
|
585
|
+
}
|
|
586
|
+
},
|
|
587
|
+
elementProps
|
|
588
|
+
],
|
|
589
|
+
ref: [
|
|
590
|
+
forwardedRef,
|
|
591
|
+
store.context.popupRef,
|
|
592
|
+
setPopupElement
|
|
593
|
+
],
|
|
594
|
+
stateAttributesMapping: DrawerPopup_stateAttributesMapping
|
|
595
|
+
});
|
|
596
|
+
return /*#__PURE__*/ jsx(FloatingFocusManager, {
|
|
597
|
+
context: floatingRootContext,
|
|
598
|
+
openInteractionType: openMethod,
|
|
599
|
+
disabled: !mounted,
|
|
600
|
+
closeOnFocusOut: !disablePointerDismissal,
|
|
601
|
+
initialFocus: resolvedInitialFocus,
|
|
602
|
+
returnFocus: finalFocus,
|
|
603
|
+
modal: false !== modal,
|
|
604
|
+
restoreFocus: "popup",
|
|
605
|
+
children: element
|
|
606
|
+
});
|
|
607
|
+
});
|
|
608
|
+
if ("production" !== process.env.NODE_ENV) DrawerPopup_DrawerPopup.displayName = "DrawerPopup";
|
|
609
|
+
function isScrollable(element, axis) {
|
|
610
|
+
const style = floating_ui_utils_dom_getComputedStyle(element);
|
|
611
|
+
if ('vertical' === axis) {
|
|
612
|
+
const overflowY = style.overflowY;
|
|
613
|
+
return ('auto' === overflowY || 'scroll' === overflowY) && element.scrollHeight > element.clientHeight;
|
|
614
|
+
}
|
|
615
|
+
const overflowX = style.overflowX;
|
|
616
|
+
return ('auto' === overflowX || 'scroll' === overflowX) && element.scrollWidth > element.clientWidth;
|
|
617
|
+
}
|
|
618
|
+
function hasScrollableAncestor(target, root, axes) {
|
|
619
|
+
let node = target;
|
|
620
|
+
while(node && node !== root){
|
|
621
|
+
for (const axis of axes)if (isScrollable(node, axis)) return true;
|
|
622
|
+
node = node.parentElement;
|
|
623
|
+
}
|
|
624
|
+
return false;
|
|
625
|
+
}
|
|
626
|
+
function findScrollableTouchTarget(target, root, axis = 'vertical') {
|
|
627
|
+
let node = isHTMLElement(target) ? target : null;
|
|
628
|
+
while(node && node !== root){
|
|
629
|
+
if (isScrollable(node, axis)) return node;
|
|
630
|
+
node = node.parentElement;
|
|
631
|
+
}
|
|
632
|
+
return isScrollable(root, axis) ? root : null;
|
|
633
|
+
}
|
|
634
|
+
function getElementAtPoint(doc, x, y) {
|
|
635
|
+
return 'function' == typeof doc?.elementFromPoint ? doc.elementFromPoint(x, y) : null;
|
|
636
|
+
}
|
|
637
|
+
const DEFAULT_SWIPE_THRESHOLD = 40;
|
|
638
|
+
const REVERSE_CANCEL_THRESHOLD = 10;
|
|
639
|
+
const MIN_DRAG_THRESHOLD = 1;
|
|
640
|
+
const MIN_VELOCITY_DURATION_MS = 50;
|
|
641
|
+
const MIN_RELEASE_VELOCITY_DURATION_MS = 16;
|
|
642
|
+
const MAX_RELEASE_VELOCITY_AGE_MS = 80;
|
|
643
|
+
const DEFAULT_IGNORE_SELECTOR = 'button,a,input,select,textarea,label,[role="button"]';
|
|
644
|
+
function getDisplacement(direction, deltaX, deltaY) {
|
|
645
|
+
switch(direction){
|
|
646
|
+
case 'up':
|
|
647
|
+
return -deltaY;
|
|
648
|
+
case 'down':
|
|
649
|
+
return deltaY;
|
|
650
|
+
case 'left':
|
|
651
|
+
return -deltaX;
|
|
652
|
+
case 'right':
|
|
653
|
+
return deltaX;
|
|
654
|
+
default:
|
|
655
|
+
return 0;
|
|
656
|
+
}
|
|
657
|
+
}
|
|
658
|
+
function getElementTransform(element) {
|
|
659
|
+
const computedStyle = getWindow(element).getComputedStyle(element);
|
|
660
|
+
const transform = computedStyle.transform;
|
|
661
|
+
let translateX = 0;
|
|
662
|
+
let translateY = 0;
|
|
663
|
+
let scale = 1;
|
|
664
|
+
if (transform && 'none' !== transform) {
|
|
665
|
+
const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
|
|
666
|
+
if (matrix) {
|
|
667
|
+
const values = matrix[1].split(', ').map(parseFloat);
|
|
668
|
+
if (6 === values.length) {
|
|
669
|
+
translateX = values[4];
|
|
670
|
+
translateY = values[5];
|
|
671
|
+
scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
|
|
672
|
+
} else if (16 === values.length) {
|
|
673
|
+
translateX = values[12];
|
|
674
|
+
translateY = values[13];
|
|
675
|
+
scale = values[0];
|
|
676
|
+
}
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
return {
|
|
680
|
+
x: translateX,
|
|
681
|
+
y: translateY,
|
|
682
|
+
scale
|
|
683
|
+
};
|
|
684
|
+
}
|
|
685
|
+
function getValidTimeStamp(timeStamp) {
|
|
686
|
+
return Number.isFinite(timeStamp) && timeStamp > 0 ? timeStamp : null;
|
|
687
|
+
}
|
|
688
|
+
function hasPrimaryMouseButton(buttons) {
|
|
689
|
+
return buttons % 2 === 1;
|
|
690
|
+
}
|
|
691
|
+
function safelyChangePointerCapture(element, pointerId, method) {
|
|
692
|
+
const pointerCaptureMethod = element[method];
|
|
693
|
+
if ('function' != typeof pointerCaptureMethod) return;
|
|
694
|
+
try {
|
|
695
|
+
pointerCaptureMethod.call(element, pointerId);
|
|
696
|
+
} catch (error) {
|
|
697
|
+
if (error && 'object' == typeof error && 'name' in error && 'NotFoundError' === error.name) return;
|
|
698
|
+
throw error;
|
|
699
|
+
}
|
|
700
|
+
}
|
|
701
|
+
function useSwipeDismiss(options) {
|
|
702
|
+
const { enabled, directions, elementRef, movementCssVars, canStart, ignoreSelectorWhenTouch = true, ignoreScrollableAncestors = false, swipeThreshold: swipeThresholdProp, onDismiss, onProgress, onCancel, onSwipeStart, onRelease, onSwipingChange, trackDrag = true } = options;
|
|
703
|
+
const ignoreSelector = DEFAULT_IGNORE_SELECTOR;
|
|
704
|
+
const primaryDirection = 1 === directions.length ? directions[0] : void 0;
|
|
705
|
+
const swipeThresholdDefault = Math.max(0, 'number' == typeof swipeThresholdProp ? swipeThresholdProp : DEFAULT_SWIPE_THRESHOLD);
|
|
706
|
+
const allowLeft = directions.includes('left');
|
|
707
|
+
const allowRight = directions.includes('right');
|
|
708
|
+
const allowUp = directions.includes('up');
|
|
709
|
+
const allowDown = directions.includes('down');
|
|
710
|
+
const hasHorizontal = allowLeft || allowRight;
|
|
711
|
+
const hasVertical = allowUp || allowDown;
|
|
712
|
+
const scrollAxes = __rspack_external_react.useMemo(()=>{
|
|
713
|
+
const axes = [];
|
|
714
|
+
if (hasVertical) axes.push('vertical');
|
|
715
|
+
if (hasHorizontal) axes.push('horizontal');
|
|
716
|
+
return axes;
|
|
717
|
+
}, [
|
|
718
|
+
hasHorizontal,
|
|
719
|
+
hasVertical
|
|
720
|
+
]);
|
|
721
|
+
const [currentSwipeDirection, setCurrentSwipeDirection] = __rspack_external_react.useState(void 0);
|
|
722
|
+
const [isSwiping, setIsSwiping] = __rspack_external_react.useState(false);
|
|
723
|
+
const [isRealSwipe, setIsRealSwipe] = __rspack_external_react.useState(false);
|
|
724
|
+
const [dragDismissed, setDragDismissed] = __rspack_external_react.useState(false);
|
|
725
|
+
const [dragOffset, setDragOffset] = __rspack_external_react.useState({
|
|
726
|
+
x: 0,
|
|
727
|
+
y: 0
|
|
728
|
+
});
|
|
729
|
+
const [initialTransform, setInitialTransform] = __rspack_external_react.useState({
|
|
730
|
+
x: 0,
|
|
731
|
+
y: 0,
|
|
732
|
+
scale: 1
|
|
733
|
+
});
|
|
734
|
+
const [lockedDirection, setLockedDirection] = __rspack_external_react.useState(null);
|
|
735
|
+
const dragStartPosRef = __rspack_external_react.useRef({
|
|
736
|
+
x: 0,
|
|
737
|
+
y: 0
|
|
738
|
+
});
|
|
739
|
+
const dragOffsetRef = __rspack_external_react.useRef({
|
|
740
|
+
x: 0,
|
|
741
|
+
y: 0
|
|
742
|
+
});
|
|
743
|
+
const lastMovePosRef = __rspack_external_react.useRef(null);
|
|
744
|
+
const initialTransformRef = __rspack_external_react.useRef({
|
|
745
|
+
x: 0,
|
|
746
|
+
y: 0,
|
|
747
|
+
scale: 1
|
|
748
|
+
});
|
|
749
|
+
const intendedSwipeDirectionRef = __rspack_external_react.useRef(void 0);
|
|
750
|
+
const maxSwipeDisplacementRef = __rspack_external_react.useRef(0);
|
|
751
|
+
const cancelledSwipeRef = __rspack_external_react.useRef(false);
|
|
752
|
+
const swipeCancelBaselineRef = __rspack_external_react.useRef({
|
|
753
|
+
x: 0,
|
|
754
|
+
y: 0
|
|
755
|
+
});
|
|
756
|
+
const isFirstPointerMoveRef = __rspack_external_react.useRef(false);
|
|
757
|
+
const pendingSwipeRef = __rspack_external_react.useRef(false);
|
|
758
|
+
const pendingSwipeStartPosRef = __rspack_external_react.useRef(null);
|
|
759
|
+
const swipeFromScrollableRef = __rspack_external_react.useRef(false);
|
|
760
|
+
const sawPrimaryButtonsOnMoveRef = __rspack_external_react.useRef(false);
|
|
761
|
+
const elementSizeRef = __rspack_external_react.useRef({
|
|
762
|
+
width: 0,
|
|
763
|
+
height: 0
|
|
764
|
+
});
|
|
765
|
+
const swipeProgressRef = __rspack_external_react.useRef(0);
|
|
766
|
+
const swipeThresholdRef = __rspack_external_react.useRef(swipeThresholdDefault);
|
|
767
|
+
const swipeStartTimeRef = __rspack_external_react.useRef(null);
|
|
768
|
+
const lastDragSampleRef = __rspack_external_react.useRef(null);
|
|
769
|
+
const lastDragVelocityRef = __rspack_external_react.useRef({
|
|
770
|
+
x: 0,
|
|
771
|
+
y: 0
|
|
772
|
+
});
|
|
773
|
+
const lastProgressDetailsRef = __rspack_external_react.useRef(null);
|
|
774
|
+
const isSwipingRef = __rspack_external_react.useRef(false);
|
|
775
|
+
const setSwiping = useStableCallback((nextSwiping)=>{
|
|
776
|
+
if (isSwipingRef.current === nextSwiping) return;
|
|
777
|
+
isSwipingRef.current = nextSwiping;
|
|
778
|
+
setIsSwiping(nextSwiping);
|
|
779
|
+
onSwipingChange?.(nextSwiping);
|
|
780
|
+
});
|
|
781
|
+
function resolveSwipeThreshold(direction) {
|
|
782
|
+
if (!direction) return;
|
|
783
|
+
if ('function' != typeof swipeThresholdProp) {
|
|
784
|
+
swipeThresholdRef.current = swipeThresholdDefault;
|
|
785
|
+
return;
|
|
786
|
+
}
|
|
787
|
+
const element = elementRef.current;
|
|
788
|
+
if (!element) return;
|
|
789
|
+
const value = swipeThresholdProp({
|
|
790
|
+
element,
|
|
791
|
+
direction
|
|
792
|
+
});
|
|
793
|
+
swipeThresholdRef.current = Math.max(0, value);
|
|
794
|
+
}
|
|
795
|
+
const updateSwipeProgress = useStableCallback((progress, details)=>{
|
|
796
|
+
const nextProgress = Number.isFinite(progress) ? clamp(progress, 0, 1) : 0;
|
|
797
|
+
const progressChanged = nextProgress !== swipeProgressRef.current;
|
|
798
|
+
let detailsChanged = false;
|
|
799
|
+
if (details) {
|
|
800
|
+
const lastDetails = lastProgressDetailsRef.current;
|
|
801
|
+
detailsChanged = !lastDetails || lastDetails.deltaX !== details.deltaX || lastDetails.deltaY !== details.deltaY || lastDetails.direction !== details.direction;
|
|
802
|
+
}
|
|
803
|
+
if (!progressChanged && !detailsChanged) return;
|
|
804
|
+
swipeProgressRef.current = nextProgress;
|
|
805
|
+
if (details) lastProgressDetailsRef.current = details;
|
|
806
|
+
else if (progressChanged) lastProgressDetailsRef.current = null;
|
|
807
|
+
onProgress?.(nextProgress, details);
|
|
808
|
+
});
|
|
809
|
+
function recordDragSample(offset, timeStamp) {
|
|
810
|
+
if (null === timeStamp) return;
|
|
811
|
+
const lastSample = lastDragSampleRef.current;
|
|
812
|
+
if (lastSample && timeStamp > lastSample.time) {
|
|
813
|
+
const durationMs = Math.max(timeStamp - lastSample.time, MIN_RELEASE_VELOCITY_DURATION_MS);
|
|
814
|
+
lastDragVelocityRef.current = {
|
|
815
|
+
x: (offset.x - lastSample.x) / durationMs,
|
|
816
|
+
y: (offset.y - lastSample.y) / durationMs
|
|
817
|
+
};
|
|
818
|
+
}
|
|
819
|
+
lastDragSampleRef.current = {
|
|
820
|
+
x: offset.x,
|
|
821
|
+
y: offset.y,
|
|
822
|
+
time: timeStamp
|
|
823
|
+
};
|
|
824
|
+
}
|
|
825
|
+
const reset = __rspack_external_react.useCallback(()=>{
|
|
826
|
+
setCurrentSwipeDirection(void 0);
|
|
827
|
+
setSwiping(false);
|
|
828
|
+
setIsRealSwipe(false);
|
|
829
|
+
setDragDismissed(false);
|
|
830
|
+
setDragOffset({
|
|
831
|
+
x: 0,
|
|
832
|
+
y: 0
|
|
833
|
+
});
|
|
834
|
+
setInitialTransform({
|
|
835
|
+
x: 0,
|
|
836
|
+
y: 0,
|
|
837
|
+
scale: 1
|
|
838
|
+
});
|
|
839
|
+
setLockedDirection(null);
|
|
840
|
+
updateSwipeProgress(0);
|
|
841
|
+
swipeThresholdRef.current = swipeThresholdDefault;
|
|
842
|
+
dragStartPosRef.current = {
|
|
843
|
+
x: 0,
|
|
844
|
+
y: 0
|
|
845
|
+
};
|
|
846
|
+
dragOffsetRef.current = {
|
|
847
|
+
x: 0,
|
|
848
|
+
y: 0
|
|
849
|
+
};
|
|
850
|
+
initialTransformRef.current = {
|
|
851
|
+
x: 0,
|
|
852
|
+
y: 0,
|
|
853
|
+
scale: 1
|
|
854
|
+
};
|
|
855
|
+
intendedSwipeDirectionRef.current = void 0;
|
|
856
|
+
maxSwipeDisplacementRef.current = 0;
|
|
857
|
+
cancelledSwipeRef.current = false;
|
|
858
|
+
swipeCancelBaselineRef.current = {
|
|
859
|
+
x: 0,
|
|
860
|
+
y: 0
|
|
861
|
+
};
|
|
862
|
+
isFirstPointerMoveRef.current = false;
|
|
863
|
+
lastMovePosRef.current = null;
|
|
864
|
+
pendingSwipeRef.current = false;
|
|
865
|
+
pendingSwipeStartPosRef.current = null;
|
|
866
|
+
swipeFromScrollableRef.current = false;
|
|
867
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
868
|
+
elementSizeRef.current = {
|
|
869
|
+
width: 0,
|
|
870
|
+
height: 0
|
|
871
|
+
};
|
|
872
|
+
swipeStartTimeRef.current = null;
|
|
873
|
+
lastDragSampleRef.current = null;
|
|
874
|
+
lastDragVelocityRef.current = {
|
|
875
|
+
x: 0,
|
|
876
|
+
y: 0
|
|
877
|
+
};
|
|
878
|
+
lastProgressDetailsRef.current = null;
|
|
879
|
+
}, [
|
|
880
|
+
setSwiping,
|
|
881
|
+
swipeThresholdDefault,
|
|
882
|
+
updateSwipeProgress
|
|
883
|
+
]);
|
|
884
|
+
__rspack_external_react.useEffect(()=>{
|
|
885
|
+
if ('function' != typeof swipeThresholdProp) swipeThresholdRef.current = swipeThresholdDefault;
|
|
886
|
+
}, [
|
|
887
|
+
swipeThresholdDefault,
|
|
888
|
+
swipeThresholdProp
|
|
889
|
+
]);
|
|
890
|
+
function getPrimaryPointerPosition(event) {
|
|
891
|
+
if ('touches' in event) {
|
|
892
|
+
const touch = event.touches[0];
|
|
893
|
+
return touch ? {
|
|
894
|
+
x: touch.clientX,
|
|
895
|
+
y: touch.clientY
|
|
896
|
+
} : null;
|
|
897
|
+
}
|
|
898
|
+
return {
|
|
899
|
+
x: event.clientX,
|
|
900
|
+
y: event.clientY
|
|
901
|
+
};
|
|
902
|
+
}
|
|
903
|
+
function isTouchLikeEvent(event) {
|
|
904
|
+
if ('touches' in event) return true;
|
|
905
|
+
return 'touch' === event.pointerType;
|
|
906
|
+
}
|
|
907
|
+
function getTargetAtPoint(position, nativeEvent) {
|
|
908
|
+
const doc = ownerDocument(elementRef.current);
|
|
909
|
+
const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
|
|
910
|
+
const target = elementAtPoint ?? getTarget(nativeEvent);
|
|
911
|
+
return target;
|
|
912
|
+
}
|
|
913
|
+
function findGestureScrollableTouchTarget(target, root) {
|
|
914
|
+
if (hasHorizontal && !hasVertical) return findScrollableTouchTarget(target, root, 'horizontal');
|
|
915
|
+
if (hasVertical && !hasHorizontal) return findScrollableTouchTarget(target, root, 'vertical');
|
|
916
|
+
return findScrollableTouchTarget(target, root, 'vertical') ?? findScrollableTouchTarget(target, root, 'horizontal');
|
|
917
|
+
}
|
|
918
|
+
function startSwipeAtPosition(event, position, startOptions) {
|
|
919
|
+
swipeFromScrollableRef.current = false;
|
|
920
|
+
const touchLike = isTouchLikeEvent(event);
|
|
921
|
+
const target = getTargetAtPoint(position, event.nativeEvent);
|
|
922
|
+
const doc = ownerDocument(elementRef.current);
|
|
923
|
+
const body = doc.body;
|
|
924
|
+
const scrollableTarget = touchLike && body ? findGestureScrollableTouchTarget(target, body) : null;
|
|
925
|
+
const ignoreScrollableTarget = startOptions?.ignoreScrollableTarget ?? false;
|
|
926
|
+
if (scrollableTarget && !ignoreScrollableTarget) return false;
|
|
927
|
+
swipeFromScrollableRef.current = Boolean(scrollableTarget && ignoreScrollableTarget);
|
|
928
|
+
const isInteractiveElement = target ? target.closest(ignoreSelector) : false;
|
|
929
|
+
if (isInteractiveElement && (!touchLike || ignoreSelectorWhenTouch)) return false;
|
|
930
|
+
const element = elementRef.current;
|
|
931
|
+
if (ignoreScrollableAncestors && element && target && scrollAxes.length > 0) {
|
|
932
|
+
const ignoreAncestors = startOptions?.ignoreScrollableAncestors ?? false;
|
|
933
|
+
if (!ignoreAncestors && hasScrollableAncestor(target, element, scrollAxes)) return false;
|
|
934
|
+
}
|
|
935
|
+
cancelledSwipeRef.current = false;
|
|
936
|
+
intendedSwipeDirectionRef.current = void 0;
|
|
937
|
+
maxSwipeDisplacementRef.current = 0;
|
|
938
|
+
dragStartPosRef.current = position;
|
|
939
|
+
swipeStartTimeRef.current = getValidTimeStamp(event.timeStamp);
|
|
940
|
+
swipeCancelBaselineRef.current = position;
|
|
941
|
+
lastMovePosRef.current = position;
|
|
942
|
+
if (element) {
|
|
943
|
+
elementSizeRef.current = {
|
|
944
|
+
width: element.offsetWidth,
|
|
945
|
+
height: element.offsetHeight
|
|
946
|
+
};
|
|
947
|
+
resolveSwipeThreshold(primaryDirection);
|
|
948
|
+
const transform = getElementTransform(element);
|
|
949
|
+
initialTransformRef.current = transform;
|
|
950
|
+
dragOffsetRef.current = {
|
|
951
|
+
x: transform.x,
|
|
952
|
+
y: transform.y
|
|
953
|
+
};
|
|
954
|
+
setInitialTransform(transform);
|
|
955
|
+
setDragOffset({
|
|
956
|
+
x: transform.x,
|
|
957
|
+
y: transform.y
|
|
958
|
+
});
|
|
959
|
+
recordDragSample({
|
|
960
|
+
x: transform.x,
|
|
961
|
+
y: transform.y
|
|
962
|
+
}, swipeStartTimeRef.current);
|
|
963
|
+
if (!('touches' in event)) safelyChangePointerCapture(element, event.pointerId, 'setPointerCapture');
|
|
964
|
+
}
|
|
965
|
+
onSwipeStart?.(event.nativeEvent);
|
|
966
|
+
setSwiping(true);
|
|
967
|
+
setIsRealSwipe(false);
|
|
968
|
+
setLockedDirection(null);
|
|
969
|
+
isFirstPointerMoveRef.current = true;
|
|
970
|
+
updateSwipeProgress(0);
|
|
971
|
+
return true;
|
|
972
|
+
}
|
|
973
|
+
function resetPendingSwipeState() {
|
|
974
|
+
clearPendingSwipeStartState();
|
|
975
|
+
swipeFromScrollableRef.current = false;
|
|
976
|
+
lastMovePosRef.current = null;
|
|
977
|
+
}
|
|
978
|
+
function clearPendingSwipeStartState() {
|
|
979
|
+
pendingSwipeRef.current = false;
|
|
980
|
+
pendingSwipeStartPosRef.current = null;
|
|
981
|
+
}
|
|
982
|
+
function cancelSwipeInteraction(event) {
|
|
983
|
+
resetPendingSwipeState();
|
|
984
|
+
if (!isSwipingRef.current) return;
|
|
985
|
+
setSwiping(false);
|
|
986
|
+
setIsRealSwipe(false);
|
|
987
|
+
setLockedDirection(null);
|
|
988
|
+
const resolvedInitialTransform = trackDrag ? initialTransform : initialTransformRef.current;
|
|
989
|
+
dragOffsetRef.current = {
|
|
990
|
+
x: resolvedInitialTransform.x,
|
|
991
|
+
y: resolvedInitialTransform.y
|
|
992
|
+
};
|
|
993
|
+
setDragOffset({
|
|
994
|
+
x: resolvedInitialTransform.x,
|
|
995
|
+
y: resolvedInitialTransform.y
|
|
996
|
+
});
|
|
997
|
+
setCurrentSwipeDirection(void 0);
|
|
998
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
999
|
+
const element = elementRef.current;
|
|
1000
|
+
if (element) safelyChangePointerCapture(element, event.pointerId, 'releasePointerCapture');
|
|
1001
|
+
updateSwipeProgress(0, {
|
|
1002
|
+
deltaX: 0,
|
|
1003
|
+
deltaY: 0,
|
|
1004
|
+
direction: void 0
|
|
1005
|
+
});
|
|
1006
|
+
onCancel?.(event.nativeEvent);
|
|
1007
|
+
}
|
|
1008
|
+
function applyDirectionalDamping(deltaX, deltaY) {
|
|
1009
|
+
const exponent = (value)=>value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);
|
|
1010
|
+
const dampAxis = (delta, allowNegative, allowPositive)=>{
|
|
1011
|
+
if (!allowNegative && delta < 0) return exponent(delta);
|
|
1012
|
+
if (!allowPositive && delta > 0) return exponent(delta);
|
|
1013
|
+
return delta;
|
|
1014
|
+
};
|
|
1015
|
+
const newDeltaX = hasHorizontal ? dampAxis(deltaX, allowLeft, allowRight) : exponent(deltaX);
|
|
1016
|
+
const newDeltaY = hasVertical ? dampAxis(deltaY, allowUp, allowDown) : exponent(deltaY);
|
|
1017
|
+
return {
|
|
1018
|
+
x: newDeltaX,
|
|
1019
|
+
y: newDeltaY
|
|
1020
|
+
};
|
|
1021
|
+
}
|
|
1022
|
+
function canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY) {
|
|
1023
|
+
const absDeltaX = Math.abs(deltaX);
|
|
1024
|
+
const absDeltaY = Math.abs(deltaY);
|
|
1025
|
+
const useVerticalAxis = hasVertical && 0 !== deltaY && (!hasHorizontal || absDeltaY >= absDeltaX);
|
|
1026
|
+
if (useVerticalAxis) {
|
|
1027
|
+
const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
|
|
1028
|
+
const atTop = scrollTarget.scrollTop <= 0;
|
|
1029
|
+
const atBottom = scrollTarget.scrollTop >= maxScrollTop;
|
|
1030
|
+
const movingDown = deltaY > 0;
|
|
1031
|
+
const movingUp = deltaY < 0;
|
|
1032
|
+
const canSwipeDown = movingDown && atTop && allowDown;
|
|
1033
|
+
const canSwipeUp = movingUp && atBottom && allowUp;
|
|
1034
|
+
return canSwipeDown || canSwipeUp;
|
|
1035
|
+
}
|
|
1036
|
+
const useHorizontalAxis = hasHorizontal && 0 !== deltaX && (!hasVertical || absDeltaX > absDeltaY);
|
|
1037
|
+
if (useHorizontalAxis) {
|
|
1038
|
+
const maxScrollLeft = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
|
|
1039
|
+
const atLeft = scrollTarget.scrollLeft <= 0;
|
|
1040
|
+
const atRight = scrollTarget.scrollLeft >= maxScrollLeft;
|
|
1041
|
+
const movingRight = deltaX > 0;
|
|
1042
|
+
const movingLeft = deltaX < 0;
|
|
1043
|
+
const canSwipeRight = movingRight && atLeft && allowRight;
|
|
1044
|
+
const canSwipeLeft = movingLeft && atRight && allowLeft;
|
|
1045
|
+
return canSwipeRight || canSwipeLeft;
|
|
1046
|
+
}
|
|
1047
|
+
return null;
|
|
1048
|
+
}
|
|
1049
|
+
const handleStart = useStableCallback((event)=>{
|
|
1050
|
+
if (!enabled) return;
|
|
1051
|
+
if (event.defaultPrevented || event.nativeEvent.defaultPrevented) return;
|
|
1052
|
+
if (!('touches' in event) && 0 !== event.button) return;
|
|
1053
|
+
const startPos = getPrimaryPointerPosition(event);
|
|
1054
|
+
if (!startPos) return;
|
|
1055
|
+
pendingSwipeRef.current = true;
|
|
1056
|
+
pendingSwipeStartPosRef.current = startPos;
|
|
1057
|
+
swipeFromScrollableRef.current = false;
|
|
1058
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
1059
|
+
const allowedToStart = canStart ? canStart(startPos, {
|
|
1060
|
+
nativeEvent: event.nativeEvent,
|
|
1061
|
+
direction: primaryDirection
|
|
1062
|
+
}) : true;
|
|
1063
|
+
if (!allowedToStart) return;
|
|
1064
|
+
if (startSwipeAtPosition(event, startPos)) clearPendingSwipeStartState();
|
|
1065
|
+
});
|
|
1066
|
+
function handleMoveCore(event, position, movement) {
|
|
1067
|
+
if (!enabled || !isSwipingRef.current) return;
|
|
1068
|
+
const target = getTarget(event.nativeEvent);
|
|
1069
|
+
if (isTouchLikeEvent(event) && !swipeFromScrollableRef.current) {
|
|
1070
|
+
const boundaryElement = event.currentTarget;
|
|
1071
|
+
if (findGestureScrollableTouchTarget(target, boundaryElement)) return;
|
|
1072
|
+
}
|
|
1073
|
+
if (!('touches' in event)) event.preventDefault();
|
|
1074
|
+
if (isFirstPointerMoveRef.current) {
|
|
1075
|
+
dragStartPosRef.current = position;
|
|
1076
|
+
const moveTime = getValidTimeStamp(event.timeStamp);
|
|
1077
|
+
if (null !== moveTime) swipeStartTimeRef.current = moveTime;
|
|
1078
|
+
isFirstPointerMoveRef.current = false;
|
|
1079
|
+
}
|
|
1080
|
+
const clientX = position.x;
|
|
1081
|
+
const clientY = position.y;
|
|
1082
|
+
const movementX = movement.x;
|
|
1083
|
+
const movementY = movement.y;
|
|
1084
|
+
if (movementY < 0 && clientY > swipeCancelBaselineRef.current.y || movementY > 0 && clientY < swipeCancelBaselineRef.current.y) swipeCancelBaselineRef.current = {
|
|
1085
|
+
x: swipeCancelBaselineRef.current.x,
|
|
1086
|
+
y: clientY
|
|
1087
|
+
};
|
|
1088
|
+
if (movementX < 0 && clientX > swipeCancelBaselineRef.current.x || movementX > 0 && clientX < swipeCancelBaselineRef.current.x) swipeCancelBaselineRef.current = {
|
|
1089
|
+
x: clientX,
|
|
1090
|
+
y: swipeCancelBaselineRef.current.y
|
|
1091
|
+
};
|
|
1092
|
+
const deltaX = clientX - dragStartPosRef.current.x;
|
|
1093
|
+
const deltaY = clientY - dragStartPosRef.current.y;
|
|
1094
|
+
const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
|
|
1095
|
+
const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
|
|
1096
|
+
if (!isRealSwipe) {
|
|
1097
|
+
const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
|
1098
|
+
if (movementDistance >= MIN_DRAG_THRESHOLD) {
|
|
1099
|
+
setIsRealSwipe(true);
|
|
1100
|
+
if (null === lockedDirection) {
|
|
1101
|
+
if (hasHorizontal && hasVertical) {
|
|
1102
|
+
const absX = Math.abs(deltaX);
|
|
1103
|
+
const absY = Math.abs(deltaY);
|
|
1104
|
+
setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
|
|
1105
|
+
}
|
|
1106
|
+
}
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
let candidate;
|
|
1110
|
+
if (intendedSwipeDirectionRef.current) {
|
|
1111
|
+
const direction = intendedSwipeDirectionRef.current;
|
|
1112
|
+
const currentDisplacement = getDisplacement(direction, cancelDeltaX, cancelDeltaY);
|
|
1113
|
+
if (currentDisplacement > swipeThresholdRef.current) {
|
|
1114
|
+
cancelledSwipeRef.current = false;
|
|
1115
|
+
setCurrentSwipeDirection(direction);
|
|
1116
|
+
} else if (!(allowLeft && allowRight) && !(allowUp && allowDown) && maxSwipeDisplacementRef.current - currentDisplacement >= REVERSE_CANCEL_THRESHOLD) cancelledSwipeRef.current = true;
|
|
1117
|
+
} else {
|
|
1118
|
+
if ('vertical' === lockedDirection) {
|
|
1119
|
+
if (deltaY > 0) candidate = 'down';
|
|
1120
|
+
else if (deltaY < 0) candidate = 'up';
|
|
1121
|
+
} else if ('horizontal' === lockedDirection) {
|
|
1122
|
+
if (deltaX > 0) candidate = 'right';
|
|
1123
|
+
else if (deltaX < 0) candidate = 'left';
|
|
1124
|
+
} else candidate = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX > 0 ? 'right' : 'left' : deltaY > 0 ? 'down' : 'up';
|
|
1125
|
+
if (candidate) {
|
|
1126
|
+
const isAllowed = 'left' === candidate && allowLeft || 'right' === candidate && allowRight || 'up' === candidate && allowUp || 'down' === candidate && allowDown;
|
|
1127
|
+
if (isAllowed) {
|
|
1128
|
+
intendedSwipeDirectionRef.current = candidate;
|
|
1129
|
+
maxSwipeDisplacementRef.current = getDisplacement(candidate, deltaX, deltaY);
|
|
1130
|
+
setCurrentSwipeDirection(candidate);
|
|
1131
|
+
resolveSwipeThreshold(candidate);
|
|
1132
|
+
}
|
|
1133
|
+
}
|
|
1134
|
+
}
|
|
1135
|
+
const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
|
|
1136
|
+
let newOffsetX = initialTransformRef.current.x;
|
|
1137
|
+
let newOffsetY = initialTransformRef.current.y;
|
|
1138
|
+
if ('horizontal' === lockedDirection) {
|
|
1139
|
+
if (hasHorizontal) newOffsetX += dampedDelta.x;
|
|
1140
|
+
} else if ('vertical' === lockedDirection) {
|
|
1141
|
+
if (hasVertical) newOffsetY += dampedDelta.y;
|
|
1142
|
+
} else {
|
|
1143
|
+
if (hasHorizontal) newOffsetX += dampedDelta.x;
|
|
1144
|
+
if (hasVertical) newOffsetY += dampedDelta.y;
|
|
1145
|
+
}
|
|
1146
|
+
dragOffsetRef.current = {
|
|
1147
|
+
x: newOffsetX,
|
|
1148
|
+
y: newOffsetY
|
|
1149
|
+
};
|
|
1150
|
+
if (trackDrag) setDragOffset({
|
|
1151
|
+
x: newOffsetX,
|
|
1152
|
+
y: newOffsetY
|
|
1153
|
+
});
|
|
1154
|
+
recordDragSample({
|
|
1155
|
+
x: newOffsetX,
|
|
1156
|
+
y: newOffsetY
|
|
1157
|
+
}, getValidTimeStamp(event.timeStamp));
|
|
1158
|
+
const dragDeltaX = newOffsetX - initialTransformRef.current.x;
|
|
1159
|
+
const dragDeltaY = newOffsetY - initialTransformRef.current.y;
|
|
1160
|
+
const swipeDirectionDetails = intendedSwipeDirectionRef.current;
|
|
1161
|
+
const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
|
|
1162
|
+
if (!progressDirection) return void updateSwipeProgress(0, {
|
|
1163
|
+
deltaX: dragDeltaX,
|
|
1164
|
+
deltaY: dragDeltaY,
|
|
1165
|
+
direction: swipeDirectionDetails
|
|
1166
|
+
});
|
|
1167
|
+
const size = 'left' === progressDirection || 'right' === progressDirection ? elementSizeRef.current.width : elementSizeRef.current.height;
|
|
1168
|
+
const scale = initialTransformRef.current.scale || 1;
|
|
1169
|
+
if (size <= 0 || scale <= 0) return void updateSwipeProgress(0, {
|
|
1170
|
+
deltaX: dragDeltaX,
|
|
1171
|
+
deltaY: dragDeltaY,
|
|
1172
|
+
direction: swipeDirectionDetails
|
|
1173
|
+
});
|
|
1174
|
+
const progressDisplacement = getDisplacement(progressDirection, newOffsetX - initialTransformRef.current.x, newOffsetY - initialTransformRef.current.y);
|
|
1175
|
+
if (progressDisplacement <= 0) return void updateSwipeProgress(0, {
|
|
1176
|
+
deltaX: dragDeltaX,
|
|
1177
|
+
deltaY: dragDeltaY,
|
|
1178
|
+
direction: swipeDirectionDetails
|
|
1179
|
+
});
|
|
1180
|
+
updateSwipeProgress(progressDisplacement / (size * scale), {
|
|
1181
|
+
deltaX: dragDeltaX,
|
|
1182
|
+
deltaY: dragDeltaY,
|
|
1183
|
+
direction: swipeDirectionDetails
|
|
1184
|
+
});
|
|
1185
|
+
}
|
|
1186
|
+
const handleMove = useStableCallback((event)=>{
|
|
1187
|
+
const currentPos = getPrimaryPointerPosition(event);
|
|
1188
|
+
if (!currentPos) return;
|
|
1189
|
+
if (!('touches' in event)) {
|
|
1190
|
+
const hasPrimaryButton = hasPrimaryMouseButton(event.buttons);
|
|
1191
|
+
if (hasPrimaryButton) sawPrimaryButtonsOnMoveRef.current = true;
|
|
1192
|
+
const lostPrimaryButtonDuringSwipe = 0 === event.buttons && sawPrimaryButtonsOnMoveRef.current;
|
|
1193
|
+
if (0 !== event.buttons && !hasPrimaryButton || lostPrimaryButtonDuringSwipe) return void cancelSwipeInteraction(event);
|
|
1194
|
+
}
|
|
1195
|
+
if (!isSwiping && pendingSwipeRef.current) {
|
|
1196
|
+
if (!isTouchLikeEvent(event) && (event.defaultPrevented || event.nativeEvent.defaultPrevented)) return void resetPendingSwipeState();
|
|
1197
|
+
const allowedToStart = canStart ? canStart(currentPos, {
|
|
1198
|
+
nativeEvent: event.nativeEvent,
|
|
1199
|
+
direction: primaryDirection
|
|
1200
|
+
}) : true;
|
|
1201
|
+
if (allowedToStart) {
|
|
1202
|
+
const pendingStartPos = pendingSwipeStartPosRef.current;
|
|
1203
|
+
let ignoreScrollableOnStart = false;
|
|
1204
|
+
if (isTouchLikeEvent(event)) {
|
|
1205
|
+
const element = elementRef.current;
|
|
1206
|
+
if (pendingStartPos && element) {
|
|
1207
|
+
const target = getTargetAtPoint(currentPos, event.nativeEvent);
|
|
1208
|
+
const doc = ownerDocument(element);
|
|
1209
|
+
const body = doc.body;
|
|
1210
|
+
const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
|
|
1211
|
+
if (scrollTarget && (contains(element, scrollTarget) || contains(scrollTarget, element))) {
|
|
1212
|
+
const deltaX = currentPos.x - pendingStartPos.x;
|
|
1213
|
+
const deltaY = currentPos.y - pendingStartPos.y;
|
|
1214
|
+
const canSwipeFromEdge = canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY);
|
|
1215
|
+
if (false === canSwipeFromEdge) return;
|
|
1216
|
+
if (true === canSwipeFromEdge) ignoreScrollableOnStart = true;
|
|
1217
|
+
}
|
|
1218
|
+
}
|
|
1219
|
+
}
|
|
1220
|
+
const started = startSwipeAtPosition(event, currentPos, {
|
|
1221
|
+
ignoreScrollableTarget: ignoreScrollableOnStart,
|
|
1222
|
+
ignoreScrollableAncestors: ignoreScrollableOnStart
|
|
1223
|
+
});
|
|
1224
|
+
if (started) if (pendingStartPos && ignoreScrollableOnStart) {
|
|
1225
|
+
clearPendingSwipeStartState();
|
|
1226
|
+
dragStartPosRef.current = pendingStartPos;
|
|
1227
|
+
swipeCancelBaselineRef.current = pendingStartPos;
|
|
1228
|
+
lastMovePosRef.current = pendingStartPos;
|
|
1229
|
+
isFirstPointerMoveRef.current = false;
|
|
1230
|
+
} else {
|
|
1231
|
+
clearPendingSwipeStartState();
|
|
1232
|
+
swipeFromScrollableRef.current = false;
|
|
1233
|
+
}
|
|
1234
|
+
}
|
|
1235
|
+
}
|
|
1236
|
+
const previousPos = lastMovePosRef.current;
|
|
1237
|
+
const movement = null === previousPos ? {
|
|
1238
|
+
x: 0,
|
|
1239
|
+
y: 0
|
|
1240
|
+
} : {
|
|
1241
|
+
x: currentPos.x - previousPos.x,
|
|
1242
|
+
y: currentPos.y - previousPos.y
|
|
1243
|
+
};
|
|
1244
|
+
lastMovePosRef.current = currentPos;
|
|
1245
|
+
handleMoveCore(event, currentPos, movement);
|
|
1246
|
+
});
|
|
1247
|
+
const handleEnd = useStableCallback((event)=>{
|
|
1248
|
+
if (!enabled) return;
|
|
1249
|
+
const resolvedDragOffset = dragOffsetRef.current;
|
|
1250
|
+
const resolvedInitialTransform = initialTransformRef.current;
|
|
1251
|
+
const releaseDeltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
|
|
1252
|
+
const releaseDeltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
|
|
1253
|
+
const progressDetails = {
|
|
1254
|
+
deltaX: releaseDeltaX,
|
|
1255
|
+
deltaY: releaseDeltaY,
|
|
1256
|
+
direction: currentSwipeDirection ?? intendedSwipeDirectionRef.current
|
|
1257
|
+
};
|
|
1258
|
+
if (!isSwipingRef.current) {
|
|
1259
|
+
resetPendingSwipeState();
|
|
1260
|
+
updateSwipeProgress(0, progressDetails);
|
|
1261
|
+
return;
|
|
1262
|
+
}
|
|
1263
|
+
setSwiping(false);
|
|
1264
|
+
setIsRealSwipe(false);
|
|
1265
|
+
setLockedDirection(null);
|
|
1266
|
+
resetPendingSwipeState();
|
|
1267
|
+
sawPrimaryButtonsOnMoveRef.current = false;
|
|
1268
|
+
const element = elementRef.current;
|
|
1269
|
+
if (element) {
|
|
1270
|
+
if (!('touches' in event)) safelyChangePointerCapture(element, event.pointerId, 'releasePointerCapture');
|
|
1271
|
+
}
|
|
1272
|
+
const deltaX = releaseDeltaX;
|
|
1273
|
+
const deltaY = releaseDeltaY;
|
|
1274
|
+
const startTime = swipeStartTimeRef.current;
|
|
1275
|
+
const endTime = getValidTimeStamp(event.timeStamp);
|
|
1276
|
+
const durationMs = null !== startTime && null !== endTime && endTime > startTime ? endTime - startTime : 0;
|
|
1277
|
+
const velocityDurationMs = durationMs > 0 ? Math.max(durationMs, MIN_VELOCITY_DURATION_MS) : 0;
|
|
1278
|
+
const velocityX = velocityDurationMs > 0 ? deltaX / velocityDurationMs : 0;
|
|
1279
|
+
const velocityY = velocityDurationMs > 0 ? deltaY / velocityDurationMs : 0;
|
|
1280
|
+
let releaseVelocityX = lastDragVelocityRef.current.x;
|
|
1281
|
+
let releaseVelocityY = lastDragVelocityRef.current.y;
|
|
1282
|
+
const lastSample = lastDragSampleRef.current;
|
|
1283
|
+
if (lastSample && null !== endTime && endTime >= lastSample.time) {
|
|
1284
|
+
const ageMs = endTime - lastSample.time;
|
|
1285
|
+
if (ageMs <= MAX_RELEASE_VELOCITY_AGE_MS) {
|
|
1286
|
+
const sampleDurationMs = Math.max(ageMs, MIN_RELEASE_VELOCITY_DURATION_MS);
|
|
1287
|
+
const deltaFromLastSampleX = resolvedDragOffset.x - lastSample.x;
|
|
1288
|
+
const deltaFromLastSampleY = resolvedDragOffset.y - lastSample.y;
|
|
1289
|
+
const sampleVelocityX = deltaFromLastSampleX / sampleDurationMs;
|
|
1290
|
+
const sampleVelocityY = deltaFromLastSampleY / sampleDurationMs;
|
|
1291
|
+
if (0 !== sampleVelocityX) releaseVelocityX = sampleVelocityX;
|
|
1292
|
+
if (0 !== sampleVelocityY) releaseVelocityY = sampleVelocityY;
|
|
1293
|
+
} else {
|
|
1294
|
+
releaseVelocityX = 0;
|
|
1295
|
+
releaseVelocityY = 0;
|
|
1296
|
+
}
|
|
1297
|
+
}
|
|
1298
|
+
const releaseDecision = onRelease?.({
|
|
1299
|
+
event: event.nativeEvent,
|
|
1300
|
+
direction: currentSwipeDirection ?? intendedSwipeDirectionRef.current,
|
|
1301
|
+
deltaX,
|
|
1302
|
+
deltaY,
|
|
1303
|
+
velocityX,
|
|
1304
|
+
velocityY,
|
|
1305
|
+
releaseVelocityX,
|
|
1306
|
+
releaseVelocityY
|
|
1307
|
+
});
|
|
1308
|
+
const hasReleaseDecision = 'boolean' == typeof releaseDecision;
|
|
1309
|
+
if (cancelledSwipeRef.current && !hasReleaseDecision) {
|
|
1310
|
+
dragOffsetRef.current = {
|
|
1311
|
+
x: resolvedInitialTransform.x,
|
|
1312
|
+
y: resolvedInitialTransform.y
|
|
1313
|
+
};
|
|
1314
|
+
setDragOffset({
|
|
1315
|
+
x: resolvedInitialTransform.x,
|
|
1316
|
+
y: resolvedInitialTransform.y
|
|
1317
|
+
});
|
|
1318
|
+
setCurrentSwipeDirection(void 0);
|
|
1319
|
+
updateSwipeProgress(0, progressDetails);
|
|
1320
|
+
return;
|
|
1321
|
+
}
|
|
1322
|
+
let shouldClose = false;
|
|
1323
|
+
let dismissDirection;
|
|
1324
|
+
if (hasReleaseDecision) {
|
|
1325
|
+
shouldClose = releaseDecision;
|
|
1326
|
+
dismissDirection = currentSwipeDirection ?? intendedSwipeDirectionRef.current ?? primaryDirection;
|
|
1327
|
+
} else for (const direction of directions){
|
|
1328
|
+
switch(direction){
|
|
1329
|
+
case 'right':
|
|
1330
|
+
if (deltaX > swipeThresholdRef.current) {
|
|
1331
|
+
shouldClose = true;
|
|
1332
|
+
dismissDirection = 'right';
|
|
1333
|
+
}
|
|
1334
|
+
break;
|
|
1335
|
+
case 'left':
|
|
1336
|
+
if (deltaX < -swipeThresholdRef.current) {
|
|
1337
|
+
shouldClose = true;
|
|
1338
|
+
dismissDirection = 'left';
|
|
1339
|
+
}
|
|
1340
|
+
break;
|
|
1341
|
+
case 'down':
|
|
1342
|
+
if (deltaY > swipeThresholdRef.current) {
|
|
1343
|
+
shouldClose = true;
|
|
1344
|
+
dismissDirection = 'down';
|
|
1345
|
+
}
|
|
1346
|
+
break;
|
|
1347
|
+
case 'up':
|
|
1348
|
+
if (deltaY < -swipeThresholdRef.current) {
|
|
1349
|
+
shouldClose = true;
|
|
1350
|
+
dismissDirection = 'up';
|
|
1351
|
+
}
|
|
1352
|
+
break;
|
|
1353
|
+
default:
|
|
1354
|
+
break;
|
|
1355
|
+
}
|
|
1356
|
+
if (shouldClose) break;
|
|
1357
|
+
}
|
|
1358
|
+
if (shouldClose && dismissDirection) {
|
|
1359
|
+
setCurrentSwipeDirection(dismissDirection);
|
|
1360
|
+
setDragDismissed(true);
|
|
1361
|
+
onDismiss?.(event.nativeEvent, {
|
|
1362
|
+
direction: dismissDirection
|
|
1363
|
+
});
|
|
1364
|
+
} else {
|
|
1365
|
+
dragOffsetRef.current = {
|
|
1366
|
+
x: resolvedInitialTransform.x,
|
|
1367
|
+
y: resolvedInitialTransform.y
|
|
1368
|
+
};
|
|
1369
|
+
setDragOffset({
|
|
1370
|
+
x: resolvedInitialTransform.x,
|
|
1371
|
+
y: resolvedInitialTransform.y
|
|
1372
|
+
});
|
|
1373
|
+
setCurrentSwipeDirection(void 0);
|
|
1374
|
+
updateSwipeProgress(0, progressDetails);
|
|
1375
|
+
}
|
|
1376
|
+
});
|
|
1377
|
+
const getDragStyles = __rspack_external_react.useCallback(()=>{
|
|
1378
|
+
const resolvedDragOffset = trackDrag ? dragOffset : dragOffsetRef.current;
|
|
1379
|
+
const resolvedInitialTransform = trackDrag ? initialTransform : initialTransformRef.current;
|
|
1380
|
+
if (!isSwiping && resolvedDragOffset.x === resolvedInitialTransform.x && resolvedDragOffset.y === resolvedInitialTransform.y && !dragDismissed) return {
|
|
1381
|
+
[movementCssVars.x]: '0px',
|
|
1382
|
+
[movementCssVars.y]: '0px'
|
|
1383
|
+
};
|
|
1384
|
+
const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
|
|
1385
|
+
const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
|
|
1386
|
+
return {
|
|
1387
|
+
transition: isSwiping ? 'none' : void 0,
|
|
1388
|
+
transform: isSwiping ? `translateX(${resolvedDragOffset.x}px) translateY(${resolvedDragOffset.y}px) scale(${resolvedInitialTransform.scale})` : void 0,
|
|
1389
|
+
[movementCssVars.x]: `${deltaX}px`,
|
|
1390
|
+
[movementCssVars.y]: `${deltaY}px`
|
|
1391
|
+
};
|
|
1392
|
+
}, [
|
|
1393
|
+
dragDismissed,
|
|
1394
|
+
dragOffset,
|
|
1395
|
+
initialTransform,
|
|
1396
|
+
isSwiping,
|
|
1397
|
+
movementCssVars,
|
|
1398
|
+
trackDrag
|
|
1399
|
+
]);
|
|
1400
|
+
const getPointerProps = __rspack_external_react.useCallback(()=>{
|
|
1401
|
+
if (!enabled) return {};
|
|
1402
|
+
return {
|
|
1403
|
+
onPointerDown: handleStart,
|
|
1404
|
+
onPointerMove: handleMove,
|
|
1405
|
+
onPointerUp: handleEnd,
|
|
1406
|
+
onPointerCancel: handleEnd
|
|
1407
|
+
};
|
|
1408
|
+
}, [
|
|
1409
|
+
enabled,
|
|
1410
|
+
handleEnd,
|
|
1411
|
+
handleMove,
|
|
1412
|
+
handleStart
|
|
1413
|
+
]);
|
|
1414
|
+
const getTouchProps = __rspack_external_react.useCallback(()=>{
|
|
1415
|
+
if (!enabled) return {};
|
|
1416
|
+
return {
|
|
1417
|
+
onTouchStart: handleStart,
|
|
1418
|
+
onTouchMove: handleMove,
|
|
1419
|
+
onTouchEnd: handleEnd,
|
|
1420
|
+
onTouchCancel: handleEnd
|
|
1421
|
+
};
|
|
1422
|
+
}, [
|
|
1423
|
+
enabled,
|
|
1424
|
+
handleEnd,
|
|
1425
|
+
handleMove,
|
|
1426
|
+
handleStart
|
|
1427
|
+
]);
|
|
1428
|
+
return {
|
|
1429
|
+
swiping: isSwiping,
|
|
1430
|
+
swipeDirection: currentSwipeDirection,
|
|
1431
|
+
dragDismissed,
|
|
1432
|
+
getPointerProps,
|
|
1433
|
+
getTouchProps,
|
|
1434
|
+
getDragStyles,
|
|
1435
|
+
reset
|
|
1436
|
+
};
|
|
1437
|
+
}
|
|
1438
|
+
let DrawerSwipeAreaDataAttributes_DrawerSwipeAreaDataAttributes = function(DrawerSwipeAreaDataAttributes) {
|
|
1439
|
+
DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = popupStateMapping_CommonPopupDataAttributes.open] = "open";
|
|
1440
|
+
DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = popupStateMapping_CommonPopupDataAttributes.closed] = "closed";
|
|
1441
|
+
DrawerSwipeAreaDataAttributes["disabled"] = "data-disabled";
|
|
1442
|
+
DrawerSwipeAreaDataAttributes["swipeDirection"] = "data-swipe-direction";
|
|
1443
|
+
DrawerSwipeAreaDataAttributes["swiping"] = "data-swiping";
|
|
1444
|
+
return DrawerSwipeAreaDataAttributes;
|
|
1445
|
+
}({});
|
|
1446
|
+
const DEFAULT_SWIPE_OPEN_RATIO = 0.5;
|
|
1447
|
+
const MIN_SWIPE_START_DISTANCE = 1;
|
|
1448
|
+
const VELOCITY_THRESHOLD = 0.1;
|
|
1449
|
+
const FALLBACK_SWIPE_OPEN_THRESHOLD = 40;
|
|
1450
|
+
const SWIPE_AREA_OPEN_HOOK = {
|
|
1451
|
+
[DrawerSwipeAreaDataAttributes_DrawerSwipeAreaDataAttributes.open]: ''
|
|
1452
|
+
};
|
|
1453
|
+
const SWIPE_AREA_CLOSED_HOOK = {
|
|
1454
|
+
[DrawerSwipeAreaDataAttributes_DrawerSwipeAreaDataAttributes.closed]: ''
|
|
1455
|
+
};
|
|
1456
|
+
const SWIPE_AREA_SWIPING_HOOK = {
|
|
1457
|
+
[DrawerSwipeAreaDataAttributes_DrawerSwipeAreaDataAttributes.swiping]: ''
|
|
1458
|
+
};
|
|
1459
|
+
const SWIPE_AREA_DISABLED_HOOK = {
|
|
1460
|
+
[DrawerSwipeAreaDataAttributes_DrawerSwipeAreaDataAttributes.disabled]: ''
|
|
1461
|
+
};
|
|
1462
|
+
const DrawerSwipeArea_stateAttributesMapping = {
|
|
1463
|
+
open (value) {
|
|
1464
|
+
return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
|
|
1465
|
+
},
|
|
1466
|
+
swiping (value) {
|
|
1467
|
+
return value ? SWIPE_AREA_SWIPING_HOOK : null;
|
|
1468
|
+
},
|
|
1469
|
+
swipeDirection (value) {
|
|
1470
|
+
return value ? {
|
|
1471
|
+
[DrawerSwipeAreaDataAttributes_DrawerSwipeAreaDataAttributes.swipeDirection]: value
|
|
1472
|
+
} : null;
|
|
1473
|
+
},
|
|
1474
|
+
disabled (value) {
|
|
1475
|
+
return value ? SWIPE_AREA_DISABLED_HOOK : null;
|
|
1476
|
+
}
|
|
1477
|
+
};
|
|
1478
|
+
const oppositeSwipeDirection = {
|
|
1479
|
+
up: 'down',
|
|
1480
|
+
down: 'up',
|
|
1481
|
+
left: 'right',
|
|
1482
|
+
right: 'left'
|
|
1483
|
+
};
|
|
1484
|
+
function resolveTouchAction(direction) {
|
|
1485
|
+
return 'left' === direction || 'right' === direction ? 'pan-y' : 'pan-x';
|
|
1486
|
+
}
|
|
1487
|
+
const DrawerSwipeArea_DrawerSwipeArea = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
|
|
1488
|
+
const { render, className, style, disabled = false, swipeDirection: swipeDirectionProp, ...elementProps } = componentProps;
|
|
1489
|
+
const { store } = useDialogRootContext();
|
|
1490
|
+
const { swipeDirection, frontmostHeight } = useDrawerRootContext();
|
|
1491
|
+
const providerContext = useDrawerProviderContext(true);
|
|
1492
|
+
const [swipeActive, setSwipeActive] = __rspack_external_react.useState(false);
|
|
1493
|
+
const releaseDismissTimeout = useTimeout();
|
|
1494
|
+
const swipeAreaRef = __rspack_external_react.useRef(null);
|
|
1495
|
+
const swipeStartEventRef = __rspack_external_react.useRef(null);
|
|
1496
|
+
const openedBySwipeRef = __rspack_external_react.useRef(false);
|
|
1497
|
+
const dragDeltaRef = __rspack_external_react.useRef({
|
|
1498
|
+
x: 0,
|
|
1499
|
+
y: 0
|
|
1500
|
+
});
|
|
1501
|
+
const closedOffsetRef = __rspack_external_react.useRef(null);
|
|
1502
|
+
const appliedSwipeStylesRef = __rspack_external_react.useRef(false);
|
|
1503
|
+
const popupTransitionRef = __rspack_external_react.useRef(null);
|
|
1504
|
+
const swipeAreaId = useBaseUiId(componentProps.id);
|
|
1505
|
+
const registerTrigger = useTriggerRegistration(swipeAreaId, store);
|
|
1506
|
+
const open = store.useState('open');
|
|
1507
|
+
const resetDragDelta = useStableCallback(()=>{
|
|
1508
|
+
dragDeltaRef.current.x = 0;
|
|
1509
|
+
dragDeltaRef.current.y = 0;
|
|
1510
|
+
});
|
|
1511
|
+
const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
|
|
1512
|
+
const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
|
|
1513
|
+
const enabled = !disabled && (!open || swipeActive);
|
|
1514
|
+
function disableDismissForSwipe() {
|
|
1515
|
+
releaseDismissTimeout.clear();
|
|
1516
|
+
store.context.outsidePressEnabledRef.current = false;
|
|
1517
|
+
}
|
|
1518
|
+
function enableDismissAfterRelease() {
|
|
1519
|
+
releaseDismissTimeout.start(0, ()=>{
|
|
1520
|
+
store.context.outsidePressEnabledRef.current = true;
|
|
1521
|
+
});
|
|
1522
|
+
}
|
|
1523
|
+
function resolvePopupSize() {
|
|
1524
|
+
const popupElement = store.context.popupRef.current;
|
|
1525
|
+
if (!popupElement) return null;
|
|
1526
|
+
const isHorizontal = 'left' === dismissDirection || 'right' === dismissDirection;
|
|
1527
|
+
const size = isHorizontal ? popupElement.offsetWidth : popupElement.offsetHeight;
|
|
1528
|
+
if (size <= 0) return null;
|
|
1529
|
+
return size;
|
|
1530
|
+
}
|
|
1531
|
+
function resolveClosedOffset() {
|
|
1532
|
+
const offset = resolvePopupSize();
|
|
1533
|
+
if (null == offset) return null;
|
|
1534
|
+
const popupElement = store.context.popupRef.current;
|
|
1535
|
+
if (!popupElement) return offset;
|
|
1536
|
+
const isHorizontal = 'left' === dismissDirection || 'right' === dismissDirection;
|
|
1537
|
+
const transform = getElementTransform(popupElement);
|
|
1538
|
+
const transformOffset = isHorizontal ? transform.x : transform.y;
|
|
1539
|
+
if (Number.isFinite(transformOffset) && Math.abs(transformOffset) > 0.5) return Math.min(offset, Math.abs(transformOffset));
|
|
1540
|
+
return offset;
|
|
1541
|
+
}
|
|
1542
|
+
function resolveSwipeOpenThreshold() {
|
|
1543
|
+
const popupSize = resolvePopupSize();
|
|
1544
|
+
if (null == popupSize) return FALLBACK_SWIPE_OPEN_THRESHOLD;
|
|
1545
|
+
return popupSize * DEFAULT_SWIPE_OPEN_RATIO;
|
|
1546
|
+
}
|
|
1547
|
+
function applySwipeMovement() {
|
|
1548
|
+
if (!swipeActive) return;
|
|
1549
|
+
const popupElement = store.context.popupRef.current;
|
|
1550
|
+
if (!popupElement) return;
|
|
1551
|
+
if (!store.select('open') || !store.select('mounted')) return;
|
|
1552
|
+
if (null == closedOffsetRef.current) closedOffsetRef.current = resolveClosedOffset();
|
|
1553
|
+
const closedOffset = closedOffsetRef.current;
|
|
1554
|
+
if (!closedOffset || !Number.isFinite(closedOffset) || closedOffset <= 0) return;
|
|
1555
|
+
const { x, y } = dragDeltaRef.current;
|
|
1556
|
+
const displacement = getDisplacement(resolvedSwipeDirection, x, y);
|
|
1557
|
+
const clampedDisplacement = Math.max(0, displacement);
|
|
1558
|
+
const dampedDisplacement = clampedDisplacement > closedOffset ? closedOffset + Math.sqrt(clampedDisplacement - closedOffset) : clampedDisplacement;
|
|
1559
|
+
const remaining = closedOffset - dampedDisplacement;
|
|
1560
|
+
const directionSign = 'left' === dismissDirection || 'up' === dismissDirection ? -1 : 1;
|
|
1561
|
+
const movement = remaining * directionSign;
|
|
1562
|
+
const isHorizontal = 'left' === dismissDirection || 'right' === dismissDirection;
|
|
1563
|
+
const movementX = isHorizontal ? movement : 0;
|
|
1564
|
+
const movementY = isHorizontal ? 0 : movement;
|
|
1565
|
+
const openProgress = Math.max(0, Math.min(1, clampedDisplacement / closedOffset));
|
|
1566
|
+
const backdropProgress = Math.max(0, Math.min(1, 1 - openProgress));
|
|
1567
|
+
popupElement.style.setProperty(DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementX, `${movementX}px`);
|
|
1568
|
+
popupElement.style.setProperty(DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementY, `${movementY}px`);
|
|
1569
|
+
popupElement.setAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swiping, '');
|
|
1570
|
+
if (null === popupTransitionRef.current) popupTransitionRef.current = popupElement.style.transition;
|
|
1571
|
+
popupElement.style.transition = 'none';
|
|
1572
|
+
const backdropElement = store.context.backdropRef.current;
|
|
1573
|
+
if (backdropElement) {
|
|
1574
|
+
backdropElement.setAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swiping, '');
|
|
1575
|
+
backdropElement.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, `${backdropProgress}`);
|
|
1576
|
+
if (openProgress > 0 && frontmostHeight > 0) backdropElement.style.setProperty(DrawerPopupCssVars_DrawerPopupCssVars.height, `${frontmostHeight}px`);
|
|
1577
|
+
else backdropElement.style.removeProperty(DrawerPopupCssVars_DrawerPopupCssVars.height);
|
|
1578
|
+
}
|
|
1579
|
+
providerContext?.visualStateStore.set({
|
|
1580
|
+
swipeProgress: openProgress,
|
|
1581
|
+
frontmostHeight: openProgress > 0 ? frontmostHeight : 0
|
|
1582
|
+
});
|
|
1583
|
+
appliedSwipeStylesRef.current = true;
|
|
1584
|
+
}
|
|
1585
|
+
const clearSwipeStyles = useStableCallback(()=>{
|
|
1586
|
+
const popupElement = store.context.popupRef.current;
|
|
1587
|
+
if (popupElement && appliedSwipeStylesRef.current) {
|
|
1588
|
+
popupElement.style.removeProperty(DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementX);
|
|
1589
|
+
popupElement.style.removeProperty(DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementY);
|
|
1590
|
+
popupElement.removeAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swiping);
|
|
1591
|
+
}
|
|
1592
|
+
if (popupElement && null !== popupTransitionRef.current) {
|
|
1593
|
+
popupElement.style.transition = popupTransitionRef.current;
|
|
1594
|
+
popupTransitionRef.current = null;
|
|
1595
|
+
}
|
|
1596
|
+
const backdropElement = store.context.backdropRef.current;
|
|
1597
|
+
if (backdropElement) {
|
|
1598
|
+
backdropElement.removeAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swiping);
|
|
1599
|
+
backdropElement.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, '0');
|
|
1600
|
+
backdropElement.style.removeProperty(DrawerPopupCssVars_DrawerPopupCssVars.height);
|
|
1601
|
+
}
|
|
1602
|
+
providerContext?.visualStateStore.set({
|
|
1603
|
+
swipeProgress: 0,
|
|
1604
|
+
frontmostHeight: 0
|
|
1605
|
+
});
|
|
1606
|
+
appliedSwipeStylesRef.current = false;
|
|
1607
|
+
});
|
|
1608
|
+
function openDrawer(event) {
|
|
1609
|
+
if (store.select('open')) return;
|
|
1610
|
+
openedBySwipeRef.current = true;
|
|
1611
|
+
store.setOpen(true, createChangeEventDetails("swipe", event, swipeAreaRef.current ?? void 0));
|
|
1612
|
+
}
|
|
1613
|
+
function closeDrawer(event) {
|
|
1614
|
+
if (!store.select('open')) return;
|
|
1615
|
+
store.setOpen(false, createChangeEventDetails("swipe", event, swipeAreaRef.current ?? void 0));
|
|
1616
|
+
}
|
|
1617
|
+
function resetSwipeInteractionState() {
|
|
1618
|
+
swipeStartEventRef.current = null;
|
|
1619
|
+
openedBySwipeRef.current = false;
|
|
1620
|
+
closedOffsetRef.current = null;
|
|
1621
|
+
setSwipeActive(false);
|
|
1622
|
+
}
|
|
1623
|
+
function finishSwipeInteraction() {
|
|
1624
|
+
resetSwipeInteractionState();
|
|
1625
|
+
enableDismissAfterRelease();
|
|
1626
|
+
resetDragDelta();
|
|
1627
|
+
clearSwipeStyles();
|
|
1628
|
+
}
|
|
1629
|
+
const swipe = useSwipeDismiss({
|
|
1630
|
+
enabled,
|
|
1631
|
+
directions: [
|
|
1632
|
+
resolvedSwipeDirection
|
|
1633
|
+
],
|
|
1634
|
+
elementRef: swipeAreaRef,
|
|
1635
|
+
trackDrag: false,
|
|
1636
|
+
movementCssVars: {
|
|
1637
|
+
x: DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementX,
|
|
1638
|
+
y: DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementY
|
|
1639
|
+
},
|
|
1640
|
+
onSwipeStart (event) {
|
|
1641
|
+
disableDismissForSwipe();
|
|
1642
|
+
swipeStartEventRef.current = event;
|
|
1643
|
+
openedBySwipeRef.current = false;
|
|
1644
|
+
setSwipeActive(true);
|
|
1645
|
+
resetDragDelta();
|
|
1646
|
+
},
|
|
1647
|
+
onProgress (_progress, details) {
|
|
1648
|
+
if (!details) return;
|
|
1649
|
+
if (!swipeStartEventRef.current) return;
|
|
1650
|
+
dragDeltaRef.current.x = details.deltaX;
|
|
1651
|
+
dragDeltaRef.current.y = details.deltaY;
|
|
1652
|
+
if (details.direction !== resolvedSwipeDirection) return;
|
|
1653
|
+
const displacement = getDisplacement(resolvedSwipeDirection, details.deltaX, details.deltaY);
|
|
1654
|
+
if (displacement < MIN_SWIPE_START_DISTANCE && !openedBySwipeRef.current) return;
|
|
1655
|
+
if (!openedBySwipeRef.current) openDrawer(swipeStartEventRef.current);
|
|
1656
|
+
applySwipeMovement();
|
|
1657
|
+
},
|
|
1658
|
+
onRelease ({ event, direction, deltaX, deltaY, releaseVelocityX, releaseVelocityY }) {
|
|
1659
|
+
const displacement = getDisplacement(resolvedSwipeDirection, deltaX, deltaY);
|
|
1660
|
+
const releaseVelocity = getDisplacement(resolvedSwipeDirection, releaseVelocityX, releaseVelocityY);
|
|
1661
|
+
const threshold = resolveSwipeOpenThreshold();
|
|
1662
|
+
const hasEnoughDistance = null != threshold && displacement >= threshold;
|
|
1663
|
+
const hasEnoughVelocity = releaseVelocity >= VELOCITY_THRESHOLD;
|
|
1664
|
+
const shouldOpen = null != threshold && direction === resolvedSwipeDirection && (hasEnoughDistance || hasEnoughVelocity) && !disabled;
|
|
1665
|
+
if (shouldOpen) {
|
|
1666
|
+
if (!store.select('open')) openDrawer(event);
|
|
1667
|
+
} else if (openedBySwipeRef.current) closeDrawer(event);
|
|
1668
|
+
finishSwipeInteraction();
|
|
1669
|
+
return false;
|
|
1670
|
+
},
|
|
1671
|
+
onCancel: finishSwipeInteraction
|
|
1672
|
+
});
|
|
1673
|
+
const swipePointerProps = swipe.getPointerProps();
|
|
1674
|
+
const swipeTouchProps = swipe.getTouchProps();
|
|
1675
|
+
const resetSwipe = swipe.reset;
|
|
1676
|
+
__rspack_external_react.useEffect(()=>{
|
|
1677
|
+
if (!enabled) {
|
|
1678
|
+
resetSwipe();
|
|
1679
|
+
resetDragDelta();
|
|
1680
|
+
clearSwipeStyles();
|
|
1681
|
+
resetSwipeInteractionState();
|
|
1682
|
+
}
|
|
1683
|
+
}, [
|
|
1684
|
+
clearSwipeStyles,
|
|
1685
|
+
enabled,
|
|
1686
|
+
resetDragDelta,
|
|
1687
|
+
resetSwipe
|
|
1688
|
+
]);
|
|
1689
|
+
__rspack_external_react.useEffect(()=>()=>{
|
|
1690
|
+
store.context.outsidePressEnabledRef.current = true;
|
|
1691
|
+
}, [
|
|
1692
|
+
store
|
|
1693
|
+
]);
|
|
1694
|
+
const state = {
|
|
1695
|
+
open,
|
|
1696
|
+
swiping: swipe.swiping,
|
|
1697
|
+
swipeDirection: resolvedSwipeDirection,
|
|
1698
|
+
disabled
|
|
1699
|
+
};
|
|
1700
|
+
return useRenderElement('div', componentProps, {
|
|
1701
|
+
state,
|
|
1702
|
+
ref: [
|
|
1703
|
+
forwardedRef,
|
|
1704
|
+
swipeAreaRef,
|
|
1705
|
+
registerTrigger
|
|
1706
|
+
],
|
|
1707
|
+
stateAttributesMapping: DrawerSwipeArea_stateAttributesMapping,
|
|
1708
|
+
props: [
|
|
1709
|
+
{
|
|
1710
|
+
role: 'presentation',
|
|
1711
|
+
'aria-hidden': true,
|
|
1712
|
+
style: {
|
|
1713
|
+
pointerEvents: enabled ? void 0 : 'none',
|
|
1714
|
+
touchAction: resolveTouchAction(resolvedSwipeDirection)
|
|
1715
|
+
},
|
|
1716
|
+
onPointerDown (event) {
|
|
1717
|
+
if ('touch' === event.pointerType) return;
|
|
1718
|
+
swipePointerProps.onPointerDown?.(event);
|
|
1719
|
+
if (event.cancelable) event.preventDefault();
|
|
1720
|
+
},
|
|
1721
|
+
onPointerMove (event) {
|
|
1722
|
+
if ('touch' === event.pointerType) return;
|
|
1723
|
+
swipePointerProps.onPointerMove?.(event);
|
|
1724
|
+
},
|
|
1725
|
+
onPointerUp (event) {
|
|
1726
|
+
if ('touch' === event.pointerType) return;
|
|
1727
|
+
swipePointerProps.onPointerUp?.(event);
|
|
1728
|
+
},
|
|
1729
|
+
onPointerCancel (event) {
|
|
1730
|
+
if ('touch' === event.pointerType) return;
|
|
1731
|
+
swipePointerProps.onPointerCancel?.(event);
|
|
1732
|
+
}
|
|
1733
|
+
},
|
|
1734
|
+
swipeTouchProps,
|
|
1735
|
+
swipeAreaId ? {
|
|
1736
|
+
id: swipeAreaId
|
|
1737
|
+
} : void 0,
|
|
1738
|
+
elementProps
|
|
1739
|
+
]
|
|
1740
|
+
});
|
|
1741
|
+
});
|
|
1742
|
+
if ("production" !== process.env.NODE_ENV) DrawerSwipeArea_DrawerSwipeArea.displayName = "DrawerSwipeArea";
|
|
1743
|
+
const MIN_SWIPE_THRESHOLD = 10;
|
|
1744
|
+
const FAST_SWIPE_VELOCITY = 0.5;
|
|
1745
|
+
const SNAP_VELOCITY_THRESHOLD = 0.5;
|
|
1746
|
+
const SNAP_VELOCITY_MULTIPLIER = 300;
|
|
1747
|
+
const MAX_SNAP_VELOCITY = 4;
|
|
1748
|
+
const MIN_SWIPE_RELEASE_VELOCITY = 0.2;
|
|
1749
|
+
const MAX_SWIPE_RELEASE_VELOCITY = 4;
|
|
1750
|
+
const MIN_SWIPE_RELEASE_DURATION_MS = 80;
|
|
1751
|
+
const MAX_SWIPE_RELEASE_DURATION_MS = 360;
|
|
1752
|
+
const MIN_SWIPE_RELEASE_SCALAR = 0.1;
|
|
1753
|
+
const MAX_SWIPE_RELEASE_SCALAR = 1;
|
|
1754
|
+
const DRAWER_CONTENT_SELECTOR = `[${DRAWER_CONTENT_ATTRIBUTE}]`;
|
|
1755
|
+
const DrawerViewport_DrawerViewport = /*#__PURE__*/ __rspack_external_react.forwardRef(function(props, forwardedRef) {
|
|
1756
|
+
const { render, className, style, children, ...elementProps } = props;
|
|
1757
|
+
const { store } = useDialogRootContext();
|
|
1758
|
+
const { swipeDirection, notifyParentSwipingChange, notifyParentSwipeProgressChange, frontmostHeight, snapToSequentialPoints } = useDrawerRootContext();
|
|
1759
|
+
const providerContext = useDrawerProviderContext(true);
|
|
1760
|
+
const { snapPoints, resolvedSnapPoints, activeSnapPoint, activeSnapPointOffset, setActiveSnapPoint, popupHeight } = useDrawerSnapPoints();
|
|
1761
|
+
const open = store.useState('open');
|
|
1762
|
+
const mounted = store.useState('mounted');
|
|
1763
|
+
const nested = store.useState('nested');
|
|
1764
|
+
const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
|
|
1765
|
+
const viewportElement = store.useState('viewportElement');
|
|
1766
|
+
const popupElementState = store.useState('popupElement');
|
|
1767
|
+
const visualStateStore = providerContext?.visualStateStore;
|
|
1768
|
+
const nestedDrawerOpen = nestedOpenDrawerCount > 0;
|
|
1769
|
+
const scrollAxis = 'left' === swipeDirection || 'right' === swipeDirection ? 'horizontal' : 'vertical';
|
|
1770
|
+
const isVerticalScrollAxis = 'vertical' === scrollAxis;
|
|
1771
|
+
const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
|
|
1772
|
+
const [swipeRelease, setSwipeRelease] = __rspack_external_react.useState(null);
|
|
1773
|
+
const pendingSwipeCloseSnapPointRef = __rspack_external_react.useRef(void 0);
|
|
1774
|
+
const resetSwipeRef = __rspack_external_react.useRef(null);
|
|
1775
|
+
const controlledDismissFrame = useAnimationFrame();
|
|
1776
|
+
const nestedSwipeActiveRef = __rspack_external_react.useRef(false);
|
|
1777
|
+
const lastPointerTypeRef = __rspack_external_react.useRef('');
|
|
1778
|
+
const ignoreNextTouchStartFromPenRef = __rspack_external_react.useRef(false);
|
|
1779
|
+
const ignoreTouchSwipeRef = __rspack_external_react.useRef(false);
|
|
1780
|
+
const touchScrollStateRef = __rspack_external_react.useRef(null);
|
|
1781
|
+
const snapPointRange = __rspack_external_react.useMemo(()=>{
|
|
1782
|
+
if (!snapPoints || snapPoints.length < 2) return null;
|
|
1783
|
+
if ('down' !== swipeDirection && 'up' !== swipeDirection) return null;
|
|
1784
|
+
if (resolvedSnapPoints.length < 2) return null;
|
|
1785
|
+
const offsets = resolvedSnapPoints.map((point)=>point.offset).filter((offset)=>Number.isFinite(offset)).sort((a, b)=>a - b);
|
|
1786
|
+
if (offsets.length < 2) return null;
|
|
1787
|
+
const minOffset = offsets[0];
|
|
1788
|
+
const nextOffset = offsets[1];
|
|
1789
|
+
const maxOffset = offsets[offsets.length - 1];
|
|
1790
|
+
let range = nextOffset - minOffset;
|
|
1791
|
+
if (!Number.isFinite(range) || range <= 0) {
|
|
1792
|
+
const fallbackRange = maxOffset - minOffset;
|
|
1793
|
+
if (!Number.isFinite(fallbackRange) || fallbackRange <= 0) return null;
|
|
1794
|
+
range = fallbackRange;
|
|
1795
|
+
}
|
|
1796
|
+
return {
|
|
1797
|
+
minOffset,
|
|
1798
|
+
range
|
|
1799
|
+
};
|
|
1800
|
+
}, [
|
|
1801
|
+
resolvedSnapPoints,
|
|
1802
|
+
snapPoints,
|
|
1803
|
+
swipeDirection
|
|
1804
|
+
]);
|
|
1805
|
+
const snapPointProgress = __rspack_external_react.useMemo(()=>{
|
|
1806
|
+
if (!snapPointRange || null === activeSnapPointOffset) return null;
|
|
1807
|
+
return clamp((activeSnapPointOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
|
|
1808
|
+
}, [
|
|
1809
|
+
activeSnapPointOffset,
|
|
1810
|
+
snapPointRange
|
|
1811
|
+
]);
|
|
1812
|
+
const swipeDirections = __rspack_external_react.useMemo(()=>{
|
|
1813
|
+
if (snapPoints && snapPoints.length > 0 && ('down' === swipeDirection || 'up' === swipeDirection)) return 'down' === swipeDirection ? [
|
|
1814
|
+
'down',
|
|
1815
|
+
'up'
|
|
1816
|
+
] : [
|
|
1817
|
+
'up',
|
|
1818
|
+
'down'
|
|
1819
|
+
];
|
|
1820
|
+
return [
|
|
1821
|
+
swipeDirection
|
|
1822
|
+
];
|
|
1823
|
+
}, [
|
|
1824
|
+
snapPoints,
|
|
1825
|
+
swipeDirection
|
|
1826
|
+
]);
|
|
1827
|
+
const setSwipeDismissed = useStableCallback((dismissed)=>{
|
|
1828
|
+
setSwipeDismissedElements(store.context.popupRef.current, store.context.backdropRef.current, dismissed);
|
|
1829
|
+
});
|
|
1830
|
+
const clearSwipeRelease = useStableCallback(()=>{
|
|
1831
|
+
setSwipeDismissed(false);
|
|
1832
|
+
store.context.popupRef.current?.removeAttribute(stateAttributesMapping_TransitionStatusDataAttributes.endingStyle);
|
|
1833
|
+
setSwipeRelease(null);
|
|
1834
|
+
});
|
|
1835
|
+
const finishNestedSwipe = useStableCallback(()=>{
|
|
1836
|
+
if (!nestedSwipeActiveRef.current) return;
|
|
1837
|
+
nestedSwipeActiveRef.current = false;
|
|
1838
|
+
notifyParentSwipingChange?.(false);
|
|
1839
|
+
});
|
|
1840
|
+
const applySwipeProgress = useStableCallback(({ resolvedProgress, shouldTrackProgress, notifyParent })=>{
|
|
1841
|
+
const isActive = open && !nested && shouldTrackProgress;
|
|
1842
|
+
const swipeProgress = isActive ? resolvedProgress : 0;
|
|
1843
|
+
const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
|
|
1844
|
+
if (notifyParent && notifyParentSwipeProgressChange) {
|
|
1845
|
+
notifyParentSwipeProgressChange(nestedSwipeProgress);
|
|
1846
|
+
if (nestedSwipeProgress <= 0) finishNestedSwipe();
|
|
1847
|
+
}
|
|
1848
|
+
visualStateStore?.set({
|
|
1849
|
+
swipeProgress,
|
|
1850
|
+
frontmostHeight: swipeProgress > 0 ? frontmostHeight : 0
|
|
1851
|
+
});
|
|
1852
|
+
const backdropElement = store.context.backdropRef.current;
|
|
1853
|
+
if (!backdropElement) return;
|
|
1854
|
+
if (!isActive || swipeProgress <= 0) {
|
|
1855
|
+
backdropElement.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, '0');
|
|
1856
|
+
backdropElement.style.removeProperty(DrawerPopupCssVars_DrawerPopupCssVars.height);
|
|
1857
|
+
return;
|
|
1858
|
+
}
|
|
1859
|
+
backdropElement.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
|
|
1860
|
+
if (frontmostHeight > 0) backdropElement.style.setProperty(DrawerPopupCssVars_DrawerPopupCssVars.height, `${frontmostHeight}px`);
|
|
1861
|
+
else backdropElement.style.removeProperty(DrawerPopupCssVars_DrawerPopupCssVars.height);
|
|
1862
|
+
});
|
|
1863
|
+
function resolveSwipeRelease({ direction, deltaX, deltaY, velocityX, velocityY, releaseVelocityX, releaseVelocityY }) {
|
|
1864
|
+
if (!direction) return null;
|
|
1865
|
+
const popupElement = store.context.popupRef.current;
|
|
1866
|
+
if (!popupElement) return null;
|
|
1867
|
+
const size = 'left' === direction || 'right' === direction ? popupElement.offsetWidth : popupElement.offsetHeight;
|
|
1868
|
+
if (!Number.isFinite(size) || size <= 0) return null;
|
|
1869
|
+
const axisDelta = 'left' === direction || 'right' === direction ? deltaX : deltaY;
|
|
1870
|
+
const snapPointBaseOffset = snapPoints && snapPoints.length > 0 ? activeSnapPointOffset ?? 0 : 0;
|
|
1871
|
+
let baseOffset = 0;
|
|
1872
|
+
if ('down' === direction) baseOffset = snapPointBaseOffset;
|
|
1873
|
+
else if ('up' === direction) baseOffset = -snapPointBaseOffset;
|
|
1874
|
+
const translation = baseOffset + axisDelta;
|
|
1875
|
+
const translationAlongDirection = 'left' === direction || 'up' === direction ? -translation : translation;
|
|
1876
|
+
const remainingDistance = Math.max(0, size - translationAlongDirection);
|
|
1877
|
+
if (!Number.isFinite(remainingDistance) || remainingDistance <= 0) return null;
|
|
1878
|
+
const axisVelocity = 'left' === direction || 'right' === direction ? releaseVelocityX : releaseVelocityY;
|
|
1879
|
+
const fallbackVelocity = 'left' === direction || 'right' === direction ? velocityX : velocityY;
|
|
1880
|
+
const resolvedVelocity = Math.abs(axisVelocity) > 0 && Number.isFinite(axisVelocity) ? axisVelocity : fallbackVelocity;
|
|
1881
|
+
const directionalVelocity = 'left' === direction || 'up' === direction ? -resolvedVelocity : resolvedVelocity;
|
|
1882
|
+
if (!Number.isFinite(directionalVelocity) || directionalVelocity <= MIN_SWIPE_RELEASE_VELOCITY) return null;
|
|
1883
|
+
const clampedVelocity = clamp(directionalVelocity, MIN_SWIPE_RELEASE_VELOCITY, MAX_SWIPE_RELEASE_VELOCITY);
|
|
1884
|
+
const durationMs = clamp(remainingDistance / clampedVelocity, MIN_SWIPE_RELEASE_DURATION_MS, MAX_SWIPE_RELEASE_DURATION_MS);
|
|
1885
|
+
if (!Number.isFinite(durationMs)) return null;
|
|
1886
|
+
const normalizedDuration = (durationMs - MIN_SWIPE_RELEASE_DURATION_MS) / (MAX_SWIPE_RELEASE_DURATION_MS - MIN_SWIPE_RELEASE_DURATION_MS);
|
|
1887
|
+
const durationScalar = clamp(MIN_SWIPE_RELEASE_SCALAR + normalizedDuration * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR), MIN_SWIPE_RELEASE_SCALAR, MAX_SWIPE_RELEASE_SCALAR);
|
|
1888
|
+
if (!Number.isFinite(durationScalar) || durationScalar <= 0) return null;
|
|
1889
|
+
return durationScalar;
|
|
1890
|
+
}
|
|
1891
|
+
function updateNestedSwipeActive(details) {
|
|
1892
|
+
if (nestedSwipeActiveRef.current || !details) return;
|
|
1893
|
+
const direction = details.direction ?? swipeDirection;
|
|
1894
|
+
const delta = 'left' === direction || 'right' === direction ? details.deltaX : details.deltaY;
|
|
1895
|
+
if (!Number.isFinite(delta) || Math.abs(delta) < MIN_SWIPE_THRESHOLD) return;
|
|
1896
|
+
nestedSwipeActiveRef.current = true;
|
|
1897
|
+
notifyParentSwipingChange?.(true);
|
|
1898
|
+
}
|
|
1899
|
+
const swipe = useSwipeDismiss({
|
|
1900
|
+
enabled: mounted && !nestedDrawerOpen,
|
|
1901
|
+
directions: swipeDirections,
|
|
1902
|
+
elementRef: store.context.popupRef,
|
|
1903
|
+
ignoreSelectorWhenTouch: false,
|
|
1904
|
+
ignoreScrollableAncestors: true,
|
|
1905
|
+
movementCssVars: {
|
|
1906
|
+
x: DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementX,
|
|
1907
|
+
y: DrawerPopupCssVars_DrawerPopupCssVars.swipeMovementY
|
|
1908
|
+
},
|
|
1909
|
+
onSwipeStart (event) {
|
|
1910
|
+
if ('touches' in event || 'pointerType' in event && 'touch' === event.pointerType) return;
|
|
1911
|
+
const popupElement = store.context.popupRef.current;
|
|
1912
|
+
if (!popupElement) return;
|
|
1913
|
+
const doc = ownerDocument(popupElement);
|
|
1914
|
+
const selection = doc.getSelection?.();
|
|
1915
|
+
if (!selection || selection.isCollapsed) return;
|
|
1916
|
+
const anchorElement = isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
|
|
1917
|
+
const focusElement = isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
|
|
1918
|
+
if (!contains(popupElement, anchorElement) && !contains(popupElement, focusElement)) return;
|
|
1919
|
+
selection.removeAllRanges();
|
|
1920
|
+
},
|
|
1921
|
+
onSwipingChange (swiping) {
|
|
1922
|
+
setBackdropSwipingAttribute(store.context.backdropRef.current, swiping);
|
|
1923
|
+
if (!swiping && !notifyParentSwipeProgressChange) finishNestedSwipe();
|
|
1924
|
+
},
|
|
1925
|
+
swipeThreshold ({ element, direction }) {
|
|
1926
|
+
return getBaseSwipeThreshold(element, direction);
|
|
1927
|
+
},
|
|
1928
|
+
canStart (position, details) {
|
|
1929
|
+
const popupElement = store.context.popupRef.current;
|
|
1930
|
+
if (!popupElement) return false;
|
|
1931
|
+
const doc = popupElement.ownerDocument;
|
|
1932
|
+
const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
|
|
1933
|
+
if (!elementAtPoint || !contains(popupElement, elementAtPoint)) return false;
|
|
1934
|
+
const nativeEvent = details.nativeEvent;
|
|
1935
|
+
const touchLike = 'touches' in nativeEvent || 'pointerType' in nativeEvent && 'touch' === nativeEvent.pointerType;
|
|
1936
|
+
if (touchLike && shouldIgnoreSwipeForTextSelection(doc, popupElement)) return false;
|
|
1937
|
+
if ('touchstart' === nativeEvent.type && isSwipeIgnoredTarget(elementAtPoint)) return false;
|
|
1938
|
+
return true;
|
|
1939
|
+
},
|
|
1940
|
+
onProgress (progress, details) {
|
|
1941
|
+
updateNestedSwipeActive(details);
|
|
1942
|
+
const currentDirection = details?.direction ?? swipe.swipeDirection;
|
|
1943
|
+
const isDismissSwipe = void 0 === currentDirection || currentDirection === swipeDirection;
|
|
1944
|
+
const hasSnapPoints = Boolean(snapPoints && snapPoints.length > 0);
|
|
1945
|
+
const isVerticalSwipe = 'down' === swipeDirection || 'up' === swipeDirection;
|
|
1946
|
+
const shouldTrackProgress = hasSnapPoints && isVerticalSwipe || !hasSnapPoints || 'left' === swipeDirection || 'right' === swipeDirection || isDismissSwipe;
|
|
1947
|
+
let resolvedProgress = progress;
|
|
1948
|
+
if (snapPointRange && popupHeight > 0) {
|
|
1949
|
+
if (details && Number.isFinite(details.deltaY)) {
|
|
1950
|
+
const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
|
|
1951
|
+
const nextOffset = clamp(baseOffset + details.deltaY, 0, popupHeight);
|
|
1952
|
+
resolvedProgress = clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
|
|
1953
|
+
} else if (null !== snapPointProgress) resolvedProgress = snapPointProgress;
|
|
1954
|
+
else if ('down' === currentDirection || 'up' === currentDirection) {
|
|
1955
|
+
const displacement = progress * popupHeight;
|
|
1956
|
+
const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
|
|
1957
|
+
const nextOffset = 'down' === currentDirection ? baseOffset + displacement : baseOffset - displacement;
|
|
1958
|
+
resolvedProgress = clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
|
|
1959
|
+
}
|
|
1960
|
+
}
|
|
1961
|
+
applySwipeProgress({
|
|
1962
|
+
resolvedProgress,
|
|
1963
|
+
shouldTrackProgress,
|
|
1964
|
+
notifyParent: true
|
|
1965
|
+
});
|
|
1966
|
+
},
|
|
1967
|
+
onRelease ({ event, deltaX, deltaY, direction, velocityX, velocityY, releaseVelocityX, releaseVelocityY }) {
|
|
1968
|
+
const swipeReleasePayload = {
|
|
1969
|
+
deltaX,
|
|
1970
|
+
deltaY,
|
|
1971
|
+
velocityX,
|
|
1972
|
+
velocityY,
|
|
1973
|
+
releaseVelocityX,
|
|
1974
|
+
releaseVelocityY
|
|
1975
|
+
};
|
|
1976
|
+
function startSwipeRelease(resolvedDirection) {
|
|
1977
|
+
const popupElement = store.context.popupRef.current;
|
|
1978
|
+
if (!popupElement) return;
|
|
1979
|
+
finishNestedSwipe();
|
|
1980
|
+
setSwipeDismissed(true);
|
|
1981
|
+
popupElement.style.removeProperty('transition');
|
|
1982
|
+
popupElement.setAttribute(stateAttributesMapping_TransitionStatusDataAttributes.endingStyle, '');
|
|
1983
|
+
__rspack_external_react_dom_7136dc57.flushSync(()=>{
|
|
1984
|
+
setSwipeRelease(resolveSwipeRelease({
|
|
1985
|
+
direction: resolvedDirection,
|
|
1986
|
+
...swipeReleasePayload
|
|
1987
|
+
}));
|
|
1988
|
+
});
|
|
1989
|
+
}
|
|
1990
|
+
if (!snapPoints || 0 === snapPoints.length) {
|
|
1991
|
+
if (!direction) return void clearSwipeRelease();
|
|
1992
|
+
const element = store.context.popupRef.current;
|
|
1993
|
+
if (!element) return void clearSwipeRelease();
|
|
1994
|
+
const baseThreshold = getBaseSwipeThreshold(element, direction);
|
|
1995
|
+
const delta = 'left' === direction || 'right' === direction ? deltaX : deltaY;
|
|
1996
|
+
if (!Number.isFinite(delta)) return void clearSwipeRelease();
|
|
1997
|
+
const directionalDelta = 'left' === direction || 'up' === direction ? -delta : delta;
|
|
1998
|
+
if (directionalDelta <= 0) {
|
|
1999
|
+
clearSwipeRelease();
|
|
2000
|
+
return false;
|
|
2001
|
+
}
|
|
2002
|
+
const velocity = 'left' === direction || 'right' === direction ? velocityX : velocityY;
|
|
2003
|
+
const directionalVelocity = 'left' === direction || 'up' === direction ? -velocity : velocity;
|
|
2004
|
+
if (directionalVelocity >= FAST_SWIPE_VELOCITY && directionalDelta > 0) {
|
|
2005
|
+
startSwipeRelease(direction);
|
|
2006
|
+
return true;
|
|
2007
|
+
}
|
|
2008
|
+
const shouldClose = directionalDelta > baseThreshold;
|
|
2009
|
+
if (shouldClose) startSwipeRelease(direction);
|
|
2010
|
+
else clearSwipeRelease();
|
|
2011
|
+
return shouldClose;
|
|
2012
|
+
}
|
|
2013
|
+
if ('down' !== swipeDirection && 'up' !== swipeDirection) return void clearSwipeRelease();
|
|
2014
|
+
if (!popupHeight || 0 === resolvedSnapPoints.length) return void clearSwipeRelease();
|
|
2015
|
+
const dragDelta = 'down' === swipeDirection ? deltaY : -deltaY;
|
|
2016
|
+
if (!Number.isFinite(dragDelta)) return void clearSwipeRelease();
|
|
2017
|
+
const dragDirection = Math.sign(dragDelta);
|
|
2018
|
+
const releaseDirectionalVelocity = 'down' === swipeDirection ? releaseVelocityY : -releaseVelocityY;
|
|
2019
|
+
const fallbackDirectionalVelocity = 'down' === swipeDirection ? velocityY : -velocityY;
|
|
2020
|
+
let resolvedDirectionalVelocity = Number.isFinite(releaseDirectionalVelocity) ? releaseDirectionalVelocity : fallbackDirectionalVelocity;
|
|
2021
|
+
if (0 !== dragDirection && Math.abs(dragDelta) >= MIN_SWIPE_THRESHOLD && Number.isFinite(resolvedDirectionalVelocity)) {
|
|
2022
|
+
const velocityDirection = Math.sign(resolvedDirectionalVelocity);
|
|
2023
|
+
if (0 !== velocityDirection && velocityDirection !== dragDirection) resolvedDirectionalVelocity = fallbackDirectionalVelocity;
|
|
2024
|
+
}
|
|
2025
|
+
const currentOffset = activeSnapPointOffset ?? 0;
|
|
2026
|
+
const dragTargetOffset = clamp(currentOffset + dragDelta, 0, popupHeight);
|
|
2027
|
+
const velocityOffset = Number.isFinite(resolvedDirectionalVelocity) && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? clamp(resolvedDirectionalVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
|
|
2028
|
+
const targetOffset = snapToSequentialPoints ? dragTargetOffset : clamp(dragTargetOffset + velocityOffset, 0, popupHeight);
|
|
2029
|
+
const snapPointEventDetails = createChangeEventDetails("swipe", event);
|
|
2030
|
+
const closeFromSnapPoints = ()=>{
|
|
2031
|
+
pendingSwipeCloseSnapPointRef.current = activeSnapPoint;
|
|
2032
|
+
setActiveSnapPoint?.(null, snapPointEventDetails);
|
|
2033
|
+
startSwipeRelease(swipeDirection);
|
|
2034
|
+
return true;
|
|
2035
|
+
};
|
|
2036
|
+
if (snapToSequentialPoints) {
|
|
2037
|
+
const orderedSnapPoints = [
|
|
2038
|
+
...resolvedSnapPoints
|
|
2039
|
+
].sort((first, second)=>first.offset - second.offset);
|
|
2040
|
+
if (0 === orderedSnapPoints.length) {
|
|
2041
|
+
clearSwipeRelease();
|
|
2042
|
+
return false;
|
|
2043
|
+
}
|
|
2044
|
+
let currentIndex = 0;
|
|
2045
|
+
let closestDistance = Math.abs(currentOffset - orderedSnapPoints[0].offset);
|
|
2046
|
+
for(let index = 1; index < orderedSnapPoints.length; index += 1){
|
|
2047
|
+
const distance = Math.abs(currentOffset - orderedSnapPoints[index].offset);
|
|
2048
|
+
if (distance < closestDistance) {
|
|
2049
|
+
closestDistance = distance;
|
|
2050
|
+
currentIndex = index;
|
|
2051
|
+
}
|
|
2052
|
+
}
|
|
2053
|
+
let targetSnapPoint = orderedSnapPoints[0];
|
|
2054
|
+
closestDistance = Math.abs(targetOffset - targetSnapPoint.offset);
|
|
2055
|
+
for (const snapPoint of orderedSnapPoints){
|
|
2056
|
+
const distance = Math.abs(targetOffset - snapPoint.offset);
|
|
2057
|
+
if (distance < closestDistance) {
|
|
2058
|
+
closestDistance = distance;
|
|
2059
|
+
targetSnapPoint = snapPoint;
|
|
2060
|
+
}
|
|
2061
|
+
}
|
|
2062
|
+
const velocityDirection = Math.sign(resolvedDirectionalVelocity);
|
|
2063
|
+
const shouldAdvance = 0 !== dragDirection && 0 !== velocityDirection && velocityDirection === dragDirection && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD;
|
|
2064
|
+
let effectiveTargetOffset = targetOffset;
|
|
2065
|
+
if (shouldAdvance) {
|
|
2066
|
+
const adjacentIndex = clamp(currentIndex + dragDirection, 0, orderedSnapPoints.length - 1);
|
|
2067
|
+
if (adjacentIndex !== currentIndex) {
|
|
2068
|
+
const adjacentPoint = orderedSnapPoints[adjacentIndex];
|
|
2069
|
+
const shouldForceAdjacent = dragDirection > 0 ? targetOffset < adjacentPoint.offset : targetOffset > adjacentPoint.offset;
|
|
2070
|
+
if (shouldForceAdjacent) {
|
|
2071
|
+
targetSnapPoint = adjacentPoint;
|
|
2072
|
+
effectiveTargetOffset = adjacentPoint.offset;
|
|
2073
|
+
}
|
|
2074
|
+
} else if (dragDirection > 0) return closeFromSnapPoints();
|
|
2075
|
+
}
|
|
2076
|
+
const closeOffset = popupHeight;
|
|
2077
|
+
const closeDistance = Math.abs(effectiveTargetOffset - closeOffset);
|
|
2078
|
+
const snapDistance = Math.abs(effectiveTargetOffset - targetSnapPoint.offset);
|
|
2079
|
+
if (closeDistance < snapDistance) return closeFromSnapPoints();
|
|
2080
|
+
setActiveSnapPoint?.(targetSnapPoint.value, snapPointEventDetails);
|
|
2081
|
+
clearSwipeRelease();
|
|
2082
|
+
return false;
|
|
2083
|
+
}
|
|
2084
|
+
if (resolvedDirectionalVelocity >= FAST_SWIPE_VELOCITY && dragDelta > 0) return closeFromSnapPoints();
|
|
2085
|
+
let closestSnapPoint = resolvedSnapPoints[0];
|
|
2086
|
+
let closestDistance = Math.abs(targetOffset - closestSnapPoint.offset);
|
|
2087
|
+
for (const snapPoint of resolvedSnapPoints){
|
|
2088
|
+
const distance = Math.abs(targetOffset - snapPoint.offset);
|
|
2089
|
+
if (distance < closestDistance) {
|
|
2090
|
+
closestDistance = distance;
|
|
2091
|
+
closestSnapPoint = snapPoint;
|
|
2092
|
+
}
|
|
2093
|
+
}
|
|
2094
|
+
const closeOffset = popupHeight;
|
|
2095
|
+
const closeDistance = Math.abs(targetOffset - closeOffset);
|
|
2096
|
+
if (closeDistance < closestDistance) return closeFromSnapPoints();
|
|
2097
|
+
setActiveSnapPoint?.(closestSnapPoint.value, snapPointEventDetails);
|
|
2098
|
+
clearSwipeRelease();
|
|
2099
|
+
return false;
|
|
2100
|
+
},
|
|
2101
|
+
onDismiss (event) {
|
|
2102
|
+
visualStateStore?.set({
|
|
2103
|
+
swipeProgress: 0,
|
|
2104
|
+
frontmostHeight: 0
|
|
2105
|
+
});
|
|
2106
|
+
const backdropElement = store.context.backdropRef.current;
|
|
2107
|
+
if (backdropElement) {
|
|
2108
|
+
backdropElement.style.setProperty(DrawerBackdropCssVars_DrawerBackdropCssVars.swipeProgress, '0');
|
|
2109
|
+
backdropElement.style.removeProperty(DrawerPopupCssVars_DrawerPopupCssVars.height);
|
|
2110
|
+
}
|
|
2111
|
+
const dismissEventDetails = createChangeEventDetails("swipe", event);
|
|
2112
|
+
store.setOpen(false, dismissEventDetails);
|
|
2113
|
+
if (dismissEventDetails.isCanceled) {
|
|
2114
|
+
const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
|
|
2115
|
+
if (void 0 !== pendingSnapPoint) setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails("swipe", event));
|
|
2116
|
+
pendingSwipeCloseSnapPointRef.current = void 0;
|
|
2117
|
+
resetSwipeRef.current?.();
|
|
2118
|
+
clearSwipeRelease();
|
|
2119
|
+
return;
|
|
2120
|
+
}
|
|
2121
|
+
if (store.select('open')) {
|
|
2122
|
+
const savedEvent = event;
|
|
2123
|
+
controlledDismissFrame.request(()=>{
|
|
2124
|
+
if (store.select('open')) {
|
|
2125
|
+
const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
|
|
2126
|
+
if (void 0 !== pendingSnapPoint) setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails("swipe", savedEvent));
|
|
2127
|
+
pendingSwipeCloseSnapPointRef.current = void 0;
|
|
2128
|
+
clearSwipeRelease();
|
|
2129
|
+
resetSwipeRef.current?.();
|
|
2130
|
+
} else pendingSwipeCloseSnapPointRef.current = void 0;
|
|
2131
|
+
});
|
|
2132
|
+
return;
|
|
2133
|
+
}
|
|
2134
|
+
pendingSwipeCloseSnapPointRef.current = void 0;
|
|
2135
|
+
setSwipeDismissed(true);
|
|
2136
|
+
}
|
|
2137
|
+
});
|
|
2138
|
+
const swipePointerProps = swipe.getPointerProps();
|
|
2139
|
+
const swipeTouchProps = swipe.getTouchProps();
|
|
2140
|
+
const resetSwipe = swipe.reset;
|
|
2141
|
+
resetSwipeRef.current = resetSwipe;
|
|
2142
|
+
__rspack_external_react.useEffect(()=>{
|
|
2143
|
+
const rootElement = viewportElement ?? popupElementState;
|
|
2144
|
+
if (!rootElement) return;
|
|
2145
|
+
const resolvedRootElement = rootElement;
|
|
2146
|
+
const doc = ownerDocument(resolvedRootElement);
|
|
2147
|
+
const win = getWindow(doc);
|
|
2148
|
+
function handleNativeTouchMove(event) {
|
|
2149
|
+
if (ignoreTouchSwipeRef.current) return;
|
|
2150
|
+
const touchState = touchScrollStateRef.current;
|
|
2151
|
+
const touch = event.touches[0];
|
|
2152
|
+
if (!touch || !touchState) return;
|
|
2153
|
+
const drawerAxisDelta = isVerticalScrollAxis ? touch.clientY - touchState.lastY : touch.clientX - touchState.lastX;
|
|
2154
|
+
if (isEventOnRangeInput(event, win)) {
|
|
2155
|
+
touchState.allowSwipe = false;
|
|
2156
|
+
updateTouchScrollPosition(touchState, touch);
|
|
2157
|
+
return;
|
|
2158
|
+
}
|
|
2159
|
+
if (2 === event.touches.length) return void updateTouchScrollPosition(touchState, touch);
|
|
2160
|
+
const allowTouchMove = shouldIgnoreSwipeForTextSelection(doc, resolvedRootElement);
|
|
2161
|
+
if (allowTouchMove || !open || !mounted || nestedDrawerOpen) return void updateTouchScrollPosition(touchState, touch);
|
|
2162
|
+
if (preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis)) return void updateTouchScrollPosition(touchState, touch);
|
|
2163
|
+
const scrollTarget = touchState.scrollTarget;
|
|
2164
|
+
if (!scrollTarget || scrollTarget === doc.documentElement || scrollTarget === doc.body) {
|
|
2165
|
+
if (event.cancelable) event.preventDefault();
|
|
2166
|
+
updateTouchScrollPosition(touchState, touch);
|
|
2167
|
+
return;
|
|
2168
|
+
}
|
|
2169
|
+
const hasScrollableContent = hasScrollableContentOnAxis(scrollTarget, scrollAxis);
|
|
2170
|
+
if (!hasScrollableContent) {
|
|
2171
|
+
if (event.cancelable) event.preventDefault();
|
|
2172
|
+
updateTouchScrollPosition(touchState, touch);
|
|
2173
|
+
return;
|
|
2174
|
+
}
|
|
2175
|
+
const delta = drawerAxisDelta;
|
|
2176
|
+
if (0 !== delta) {
|
|
2177
|
+
const canSwipeFromScrollEdge = canSwipeFromScrollEdgeOnMove(scrollTarget, scrollAxis, swipeDirection, delta);
|
|
2178
|
+
if (touchState.allowSwipe) {
|
|
2179
|
+
if (event.cancelable) event.preventDefault();
|
|
2180
|
+
} else if (event.cancelable) if (canSwipeFromScrollEdge) {
|
|
2181
|
+
touchState.allowSwipe = true;
|
|
2182
|
+
event.preventDefault();
|
|
2183
|
+
} else touchState.allowSwipe = false;
|
|
2184
|
+
else touchState.allowSwipe = false;
|
|
2185
|
+
}
|
|
2186
|
+
updateTouchScrollPosition(touchState, touch);
|
|
2187
|
+
}
|
|
2188
|
+
return addEventListener(doc, 'touchmove', handleNativeTouchMove, {
|
|
2189
|
+
passive: false,
|
|
2190
|
+
capture: true
|
|
2191
|
+
});
|
|
2192
|
+
}, [
|
|
2193
|
+
mounted,
|
|
2194
|
+
nestedDrawerOpen,
|
|
2195
|
+
open,
|
|
2196
|
+
popupElementState,
|
|
2197
|
+
isVerticalScrollAxis,
|
|
2198
|
+
scrollAxis,
|
|
2199
|
+
swipeDirection,
|
|
2200
|
+
viewportElement
|
|
2201
|
+
]);
|
|
2202
|
+
__rspack_external_react.useEffect(()=>{
|
|
2203
|
+
if (!snapPointRange || swipe.swiping) return;
|
|
2204
|
+
const resolvedProgress = !open || nested ? 0 : snapPointProgress ?? 0;
|
|
2205
|
+
applySwipeProgress({
|
|
2206
|
+
resolvedProgress,
|
|
2207
|
+
shouldTrackProgress: true,
|
|
2208
|
+
notifyParent: false
|
|
2209
|
+
});
|
|
2210
|
+
}, [
|
|
2211
|
+
applySwipeProgress,
|
|
2212
|
+
frontmostHeight,
|
|
2213
|
+
nested,
|
|
2214
|
+
notifyParentSwipeProgressChange,
|
|
2215
|
+
open,
|
|
2216
|
+
snapPointProgress,
|
|
2217
|
+
snapPointRange,
|
|
2218
|
+
swipe.swiping,
|
|
2219
|
+
store,
|
|
2220
|
+
visualStateStore
|
|
2221
|
+
]);
|
|
2222
|
+
__rspack_external_react.useEffect(()=>{
|
|
2223
|
+
if (!notifyParentSwipeProgressChange) return;
|
|
2224
|
+
if (!open) notifyParentSwipeProgressChange(0);
|
|
2225
|
+
return ()=>{
|
|
2226
|
+
notifyParentSwipeProgressChange(0);
|
|
2227
|
+
};
|
|
2228
|
+
}, [
|
|
2229
|
+
notifyParentSwipeProgressChange,
|
|
2230
|
+
open
|
|
2231
|
+
]);
|
|
2232
|
+
__rspack_external_react.useEffect(()=>{
|
|
2233
|
+
if (open) {
|
|
2234
|
+
resetSwipe();
|
|
2235
|
+
clearSwipeRelease();
|
|
2236
|
+
}
|
|
2237
|
+
}, [
|
|
2238
|
+
clearSwipeRelease,
|
|
2239
|
+
open,
|
|
2240
|
+
resetSwipe
|
|
2241
|
+
]);
|
|
2242
|
+
__rspack_external_react.useEffect(()=>()=>{
|
|
2243
|
+
visualStateStore?.set({
|
|
2244
|
+
swipeProgress: 0,
|
|
2245
|
+
frontmostHeight: 0
|
|
2246
|
+
});
|
|
2247
|
+
setBackdropSwipingAttribute(store.context.backdropRef.current, false);
|
|
2248
|
+
finishNestedSwipe();
|
|
2249
|
+
}, [
|
|
2250
|
+
finishNestedSwipe,
|
|
2251
|
+
store,
|
|
2252
|
+
visualStateStore
|
|
2253
|
+
]);
|
|
2254
|
+
const swipeProviderValue = __rspack_external_react.useMemo(()=>({
|
|
2255
|
+
swiping: swipe.swiping,
|
|
2256
|
+
getDragStyles: swipe.getDragStyles,
|
|
2257
|
+
swipeStrength: swipeRelease ?? null,
|
|
2258
|
+
setSwipeDismissed
|
|
2259
|
+
}), [
|
|
2260
|
+
setSwipeDismissed,
|
|
2261
|
+
swipe.getDragStyles,
|
|
2262
|
+
swipe.swiping,
|
|
2263
|
+
swipeRelease
|
|
2264
|
+
]);
|
|
2265
|
+
function resetTouchTrackingState() {
|
|
2266
|
+
ignoreTouchSwipeRef.current = false;
|
|
2267
|
+
touchScrollStateRef.current = null;
|
|
2268
|
+
lastPointerTypeRef.current = '';
|
|
2269
|
+
ignoreNextTouchStartFromPenRef.current = false;
|
|
2270
|
+
}
|
|
2271
|
+
return /*#__PURE__*/ jsx(DialogViewport_DialogViewport, {
|
|
2272
|
+
ref: forwardedRef,
|
|
2273
|
+
className: className,
|
|
2274
|
+
style: style,
|
|
2275
|
+
render: render,
|
|
2276
|
+
...mergeProps(elementProps, {
|
|
2277
|
+
onPointerDown (event) {
|
|
2278
|
+
lastPointerTypeRef.current = event.pointerType;
|
|
2279
|
+
ignoreNextTouchStartFromPenRef.current = 'pen' === event.pointerType;
|
|
2280
|
+
if (!open || !mounted || nestedDrawerOpen) return;
|
|
2281
|
+
const doc = ownerDocument(event.currentTarget);
|
|
2282
|
+
const elementAtPoint = getElementAtPoint(doc, event.clientX, event.clientY);
|
|
2283
|
+
if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) return;
|
|
2284
|
+
if ('touch' === event.pointerType) return;
|
|
2285
|
+
swipePointerProps.onPointerDown?.(event);
|
|
2286
|
+
},
|
|
2287
|
+
onPointerMove (event) {
|
|
2288
|
+
if ('touch' === event.pointerType) return;
|
|
2289
|
+
swipePointerProps.onPointerMove?.(event);
|
|
2290
|
+
},
|
|
2291
|
+
onPointerUp (event) {
|
|
2292
|
+
if (lastPointerTypeRef.current === event.pointerType) lastPointerTypeRef.current = '';
|
|
2293
|
+
if ('touch' === event.pointerType) return;
|
|
2294
|
+
swipePointerProps.onPointerUp?.(event);
|
|
2295
|
+
},
|
|
2296
|
+
onPointerCancel (event) {
|
|
2297
|
+
if (lastPointerTypeRef.current === event.pointerType) lastPointerTypeRef.current = '';
|
|
2298
|
+
if ('touch' === event.pointerType) return;
|
|
2299
|
+
swipePointerProps.onPointerCancel?.(event);
|
|
2300
|
+
},
|
|
2301
|
+
onTouchStart (event) {
|
|
2302
|
+
const startedFromPenPointerDown = 'pen' === lastPointerTypeRef.current && ignoreNextTouchStartFromPenRef.current;
|
|
2303
|
+
if (startedFromPenPointerDown) {
|
|
2304
|
+
ignoreNextTouchStartFromPenRef.current = false;
|
|
2305
|
+
ignoreTouchSwipeRef.current = false;
|
|
2306
|
+
touchScrollStateRef.current = null;
|
|
2307
|
+
return;
|
|
2308
|
+
}
|
|
2309
|
+
if (!open || !mounted || nestedDrawerOpen) {
|
|
2310
|
+
ignoreTouchSwipeRef.current = false;
|
|
2311
|
+
touchScrollStateRef.current = null;
|
|
2312
|
+
return;
|
|
2313
|
+
}
|
|
2314
|
+
const touch = event.touches[0];
|
|
2315
|
+
if (!touch) return;
|
|
2316
|
+
if (isReactTouchEventOnRangeInput(event)) {
|
|
2317
|
+
ignoreTouchSwipeRef.current = false;
|
|
2318
|
+
touchScrollStateRef.current = null;
|
|
2319
|
+
return;
|
|
2320
|
+
}
|
|
2321
|
+
const doc = ownerDocument(event.currentTarget);
|
|
2322
|
+
const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
|
|
2323
|
+
ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
|
|
2324
|
+
if (ignoreTouchSwipeRef.current) {
|
|
2325
|
+
touchScrollStateRef.current = null;
|
|
2326
|
+
return;
|
|
2327
|
+
}
|
|
2328
|
+
const rootElement = viewportElement ?? popupElementState;
|
|
2329
|
+
const eventTarget = getTarget(event.nativeEvent);
|
|
2330
|
+
const target = isElement(eventTarget) ? eventTarget : null;
|
|
2331
|
+
if (rootElement && target && !contains(rootElement, target)) {
|
|
2332
|
+
ignoreTouchSwipeRef.current = true;
|
|
2333
|
+
touchScrollStateRef.current = null;
|
|
2334
|
+
return;
|
|
2335
|
+
}
|
|
2336
|
+
let scrollTarget = null;
|
|
2337
|
+
let hasCrossAxisScrollableContent = false;
|
|
2338
|
+
if (rootElement && target) {
|
|
2339
|
+
scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
|
|
2340
|
+
hasCrossAxisScrollableContent = null != findScrollableTouchTarget(target, rootElement, crossScrollAxis);
|
|
2341
|
+
}
|
|
2342
|
+
let allowSwipe = null;
|
|
2343
|
+
if (scrollTarget) {
|
|
2344
|
+
const canSwipeFromEdge = isAtSwipeStartEdge(scrollTarget, scrollAxis, swipeDirection);
|
|
2345
|
+
allowSwipe = canSwipeFromEdge ? null : false;
|
|
2346
|
+
}
|
|
2347
|
+
touchScrollStateRef.current = {
|
|
2348
|
+
startX: touch.clientX,
|
|
2349
|
+
startY: touch.clientY,
|
|
2350
|
+
lastX: touch.clientX,
|
|
2351
|
+
lastY: touch.clientY,
|
|
2352
|
+
scrollTarget,
|
|
2353
|
+
hasCrossAxisScrollableContent,
|
|
2354
|
+
allowSwipe,
|
|
2355
|
+
preserveNativeCrossAxisScroll: false
|
|
2356
|
+
};
|
|
2357
|
+
swipeTouchProps.onTouchStart?.(event);
|
|
2358
|
+
},
|
|
2359
|
+
onTouchMove (event) {
|
|
2360
|
+
if (ignoreTouchSwipeRef.current) return;
|
|
2361
|
+
if (isReactTouchEventOnRangeInput(event)) return;
|
|
2362
|
+
const touchState = touchScrollStateRef.current;
|
|
2363
|
+
if (touchState?.preserveNativeCrossAxisScroll) return;
|
|
2364
|
+
if (touchState?.allowSwipe === false || touchState?.scrollTarget != null && !touchState.allowSwipe) return;
|
|
2365
|
+
swipeTouchProps.onTouchMove?.(event);
|
|
2366
|
+
},
|
|
2367
|
+
onTouchEnd (event) {
|
|
2368
|
+
resetTouchTrackingState();
|
|
2369
|
+
swipeTouchProps.onTouchEnd?.(event);
|
|
2370
|
+
},
|
|
2371
|
+
onTouchCancel (event) {
|
|
2372
|
+
resetTouchTrackingState();
|
|
2373
|
+
swipeTouchProps.onTouchCancel?.(event);
|
|
2374
|
+
},
|
|
2375
|
+
['data-nested-dialog-open']: void 0
|
|
2376
|
+
}),
|
|
2377
|
+
children: /*#__PURE__*/ jsx(DrawerViewportContext.Provider, {
|
|
2378
|
+
value: swipeProviderValue,
|
|
2379
|
+
children: children
|
|
2380
|
+
})
|
|
2381
|
+
});
|
|
2382
|
+
});
|
|
2383
|
+
if ("production" !== process.env.NODE_ENV) DrawerViewport_DrawerViewport.displayName = "DrawerViewport";
|
|
2384
|
+
function setSwipeDismissedElements(popupElement, backdropElement, dismissed) {
|
|
2385
|
+
if (dismissed) {
|
|
2386
|
+
popupElement?.setAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swipeDismiss, '');
|
|
2387
|
+
backdropElement?.setAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swipeDismiss, '');
|
|
2388
|
+
return;
|
|
2389
|
+
}
|
|
2390
|
+
popupElement?.removeAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swipeDismiss);
|
|
2391
|
+
backdropElement?.removeAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swipeDismiss);
|
|
2392
|
+
}
|
|
2393
|
+
function setBackdropSwipingAttribute(backdropElement, swiping) {
|
|
2394
|
+
if (!backdropElement) return;
|
|
2395
|
+
if (swiping) return void backdropElement.setAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swiping, '');
|
|
2396
|
+
backdropElement.removeAttribute(DrawerPopupDataAttributes_DrawerPopupDataAttributes.swiping);
|
|
2397
|
+
}
|
|
2398
|
+
function isSwipeIgnoredTarget(target) {
|
|
2399
|
+
return Boolean(target?.closest(BASE_UI_SWIPE_IGNORE_SELECTOR));
|
|
2400
|
+
}
|
|
2401
|
+
function isDrawerContentTarget(target) {
|
|
2402
|
+
return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
|
|
2403
|
+
}
|
|
2404
|
+
function getBaseSwipeThreshold(element, direction) {
|
|
2405
|
+
const size = 'left' === direction || 'right' === direction ? element.offsetWidth : element.offsetHeight;
|
|
2406
|
+
return Math.max(0.5 * size, MIN_SWIPE_THRESHOLD);
|
|
2407
|
+
}
|
|
2408
|
+
function isRangeInput(target, win) {
|
|
2409
|
+
return target instanceof win.HTMLInputElement && 'range' === target.type;
|
|
2410
|
+
}
|
|
2411
|
+
function isTextSelectionControl(target) {
|
|
2412
|
+
if (!isElement(target)) return false;
|
|
2413
|
+
return 'INPUT' === target.tagName || 'TEXTAREA' === target.tagName;
|
|
2414
|
+
}
|
|
2415
|
+
function hasExpandedSelectionWithinTarget(selection, target) {
|
|
2416
|
+
const anchorElement = isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
|
|
2417
|
+
const focusElement = isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
|
|
2418
|
+
return selection.containsNode(target, true) || contains(target, anchorElement) || contains(target, focusElement);
|
|
2419
|
+
}
|
|
2420
|
+
function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
|
|
2421
|
+
const activeEl = activeElement(doc);
|
|
2422
|
+
const activeElementWithinRoot = Boolean(activeEl && contains(rootElement, activeEl));
|
|
2423
|
+
if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
|
|
2424
|
+
const { selectionStart, selectionEnd } = activeEl;
|
|
2425
|
+
if (null != selectionStart && null != selectionEnd && selectionStart < selectionEnd) return true;
|
|
2426
|
+
}
|
|
2427
|
+
const selection = doc.getSelection?.();
|
|
2428
|
+
if (!selection || selection.isCollapsed) return false;
|
|
2429
|
+
return hasExpandedSelectionWithinTarget(selection, rootElement);
|
|
2430
|
+
}
|
|
2431
|
+
function isEventOnRangeInput(event, win) {
|
|
2432
|
+
const composedPath = event.composedPath();
|
|
2433
|
+
if (composedPath) return composedPath.some((pathTarget)=>isRangeInput(pathTarget, win));
|
|
2434
|
+
return isRangeInput(getTarget(event), win);
|
|
2435
|
+
}
|
|
2436
|
+
function isReactTouchEventOnRangeInput(event) {
|
|
2437
|
+
return isEventOnRangeInput(event.nativeEvent, getWindow(event.currentTarget));
|
|
2438
|
+
}
|
|
2439
|
+
function updateTouchScrollPosition(touchState, touch) {
|
|
2440
|
+
touchState.lastX = touch.clientX;
|
|
2441
|
+
touchState.lastY = touch.clientY;
|
|
2442
|
+
}
|
|
2443
|
+
function preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis) {
|
|
2444
|
+
if (touchState.preserveNativeCrossAxisScroll) return true;
|
|
2445
|
+
if (true === touchState.allowSwipe || !touchState.hasCrossAxisScrollableContent) return false;
|
|
2446
|
+
const drawerAxisGestureDelta = isVerticalScrollAxis ? touch.clientY - touchState.startY : touch.clientX - touchState.startX;
|
|
2447
|
+
const crossAxisGestureDelta = isVerticalScrollAxis ? touch.clientX - touchState.startX : touch.clientY - touchState.startY;
|
|
2448
|
+
const absDrawerAxisGestureDelta = Math.abs(drawerAxisGestureDelta);
|
|
2449
|
+
const absCrossAxisGestureDelta = Math.abs(crossAxisGestureDelta);
|
|
2450
|
+
if (absCrossAxisGestureDelta < 6 || absCrossAxisGestureDelta <= absDrawerAxisGestureDelta + 2) return false;
|
|
2451
|
+
touchState.preserveNativeCrossAxisScroll = true;
|
|
2452
|
+
return true;
|
|
2453
|
+
}
|
|
2454
|
+
function hasScrollableContentOnAxis(scrollTarget, axis) {
|
|
2455
|
+
return 'vertical' === axis ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
|
|
2456
|
+
}
|
|
2457
|
+
function getScrollMetrics(scrollTarget, axis) {
|
|
2458
|
+
if ('vertical' === axis) {
|
|
2459
|
+
const max = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
|
|
2460
|
+
return {
|
|
2461
|
+
offset: scrollTarget.scrollTop,
|
|
2462
|
+
max
|
|
2463
|
+
};
|
|
2464
|
+
}
|
|
2465
|
+
const max = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
|
|
2466
|
+
return {
|
|
2467
|
+
offset: scrollTarget.scrollLeft,
|
|
2468
|
+
max
|
|
2469
|
+
};
|
|
2470
|
+
}
|
|
2471
|
+
function isAtSwipeStartEdge(scrollTarget, axis, direction) {
|
|
2472
|
+
const { offset, max } = getScrollMetrics(scrollTarget, axis);
|
|
2473
|
+
const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
|
|
2474
|
+
if (null === dismissFromStartEdge) return false;
|
|
2475
|
+
return dismissFromStartEdge ? offset <= 0 : offset >= max;
|
|
2476
|
+
}
|
|
2477
|
+
function canSwipeFromScrollEdgeOnMove(scrollTarget, axis, direction, delta) {
|
|
2478
|
+
const { offset, max } = getScrollMetrics(scrollTarget, axis);
|
|
2479
|
+
const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
|
|
2480
|
+
if (null === dismissFromStartEdge) return false;
|
|
2481
|
+
const movingTowardDismiss = dismissFromStartEdge ? delta > 0 : delta < 0;
|
|
2482
|
+
if (!movingTowardDismiss) return false;
|
|
2483
|
+
return dismissFromStartEdge ? offset <= 0 : offset >= max;
|
|
2484
|
+
}
|
|
2485
|
+
function shouldDismissFromStartEdge(direction, axis) {
|
|
2486
|
+
if ('vertical' === axis) {
|
|
2487
|
+
if ('down' === direction) return true;
|
|
2488
|
+
if ('up' === direction) return false;
|
|
2489
|
+
return null;
|
|
2490
|
+
}
|
|
2491
|
+
if ('right' === direction) return true;
|
|
2492
|
+
if ('left' === direction) return false;
|
|
2493
|
+
return null;
|
|
2494
|
+
}
|
|
2495
|
+
const DrawerTrigger = DialogTrigger_DialogTrigger;
|
|
2496
|
+
const DrawerClose = DialogClose_DialogClose;
|
|
2497
|
+
const DrawerTitle = DialogTitle_DialogTitle;
|
|
2498
|
+
const DrawerDescription = DialogDescription_DialogDescription;
|
|
2499
|
+
var _DrawerProviderReport, _DrawerProviderReport2;
|
|
2500
|
+
function DrawerRoot(props) {
|
|
2501
|
+
const { children, open: openProp, defaultOpen = false, onOpenChange, onOpenChangeComplete, disablePointerDismissal = false, modal = true, actionsRef, handle, triggerId: triggerIdProp, defaultTriggerId: defaultTriggerIdProp = null, swipeDirection = 'down', snapToSequentialPoints = false, snapPoints, snapPoint: snapPointProp, defaultSnapPoint, onSnapPointChange } = props;
|
|
2502
|
+
const parentDrawerRootContext = useDrawerRootContext(true);
|
|
2503
|
+
const notifyParentSwipeProgressChange = parentDrawerRootContext?.onNestedSwipeProgressChange;
|
|
2504
|
+
const notifyParentFrontmostHeight = parentDrawerRootContext?.onNestedFrontmostHeightChange;
|
|
2505
|
+
const notifyParentSwipingChange = parentDrawerRootContext?.onNestedSwipingChange;
|
|
2506
|
+
const notifyParentHasNestedDrawer = parentDrawerRootContext?.onNestedDrawerPresenceChange;
|
|
2507
|
+
const [popupHeight, setPopupHeight] = __rspack_external_react.useState(0);
|
|
2508
|
+
const [frontmostHeight, setFrontmostHeight] = __rspack_external_react.useState(0);
|
|
2509
|
+
const [hasNestedDrawer, setHasNestedDrawer] = __rspack_external_react.useState(false);
|
|
2510
|
+
const [nestedSwiping, setNestedSwiping] = __rspack_external_react.useState(false);
|
|
2511
|
+
const [nestedSwipeProgressStore] = __rspack_external_react.useState(createNestedSwipeProgressStore);
|
|
2512
|
+
const resolvedDefaultSnapPoint = void 0 !== defaultSnapPoint ? defaultSnapPoint : snapPoints?.[0] ?? null;
|
|
2513
|
+
const isSnapPointControlled = void 0 !== snapPointProp;
|
|
2514
|
+
const [activeSnapPoint, setActiveSnapPointUnwrapped] = useControlled({
|
|
2515
|
+
controlled: snapPointProp,
|
|
2516
|
+
default: resolvedDefaultSnapPoint,
|
|
2517
|
+
name: 'Drawer',
|
|
2518
|
+
state: 'snapPoint'
|
|
2519
|
+
});
|
|
2520
|
+
const isNestedDrawerOpenRef = __rspack_external_react.useRef(false);
|
|
2521
|
+
const setActiveSnapPoint = useStableCallback((nextSnapPoint, eventDetails)=>{
|
|
2522
|
+
const resolvedEventDetails = eventDetails ?? createChangeEventDetails("none");
|
|
2523
|
+
onSnapPointChange?.(nextSnapPoint, resolvedEventDetails);
|
|
2524
|
+
if (resolvedEventDetails.isCanceled) return;
|
|
2525
|
+
setActiveSnapPointUnwrapped(nextSnapPoint);
|
|
2526
|
+
});
|
|
2527
|
+
const resolvedActiveSnapPoint = __rspack_external_react.useMemo(()=>{
|
|
2528
|
+
if (isSnapPointControlled) return activeSnapPoint;
|
|
2529
|
+
if (!snapPoints || 0 === snapPoints.length) return activeSnapPoint;
|
|
2530
|
+
if (null === activeSnapPoint || !snapPoints.some((snapPoint)=>Object.is(snapPoint, activeSnapPoint))) return resolvedDefaultSnapPoint;
|
|
2531
|
+
return activeSnapPoint;
|
|
2532
|
+
}, [
|
|
2533
|
+
activeSnapPoint,
|
|
2534
|
+
isSnapPointControlled,
|
|
2535
|
+
resolvedDefaultSnapPoint,
|
|
2536
|
+
snapPoints
|
|
2537
|
+
]);
|
|
2538
|
+
const onPopupHeightChange = useStableCallback((height)=>{
|
|
2539
|
+
setPopupHeight(height);
|
|
2540
|
+
if (!isNestedDrawerOpenRef.current && height > 0) setFrontmostHeight(height);
|
|
2541
|
+
});
|
|
2542
|
+
const onNestedFrontmostHeightChange = useStableCallback((height)=>{
|
|
2543
|
+
if (height > 0) {
|
|
2544
|
+
isNestedDrawerOpenRef.current = true;
|
|
2545
|
+
setFrontmostHeight(height);
|
|
2546
|
+
return;
|
|
2547
|
+
}
|
|
2548
|
+
isNestedDrawerOpenRef.current = false;
|
|
2549
|
+
if (popupHeight > 0) setFrontmostHeight(popupHeight);
|
|
2550
|
+
});
|
|
2551
|
+
const onNestedDrawerPresenceChange = useStableCallback((present)=>{
|
|
2552
|
+
setHasNestedDrawer(present);
|
|
2553
|
+
});
|
|
2554
|
+
const onNestedSwipeProgressChange = useStableCallback((progress)=>{
|
|
2555
|
+
nestedSwipeProgressStore.set(progress);
|
|
2556
|
+
notifyParentSwipeProgressChange?.(progress);
|
|
2557
|
+
});
|
|
2558
|
+
const onNestedSwipingChange = useStableCallback((swiping)=>{
|
|
2559
|
+
setNestedSwiping(swiping);
|
|
2560
|
+
notifyParentSwipingChange?.(swiping);
|
|
2561
|
+
});
|
|
2562
|
+
const handleOpenChange = useStableCallback((nextOpen, eventDetails)=>{
|
|
2563
|
+
onOpenChange?.(nextOpen, eventDetails);
|
|
2564
|
+
if (eventDetails.isCanceled) return;
|
|
2565
|
+
if (!nextOpen && snapPoints && snapPoints.length > 0) setActiveSnapPoint(resolvedDefaultSnapPoint, createChangeEventDetails(eventDetails.reason, eventDetails.event, eventDetails.trigger));
|
|
2566
|
+
});
|
|
2567
|
+
const contextValue = __rspack_external_react.useMemo(()=>({
|
|
2568
|
+
swipeDirection,
|
|
2569
|
+
snapToSequentialPoints,
|
|
2570
|
+
snapPoints,
|
|
2571
|
+
activeSnapPoint: resolvedActiveSnapPoint,
|
|
2572
|
+
setActiveSnapPoint,
|
|
2573
|
+
frontmostHeight,
|
|
2574
|
+
popupHeight,
|
|
2575
|
+
hasNestedDrawer,
|
|
2576
|
+
nestedSwiping,
|
|
2577
|
+
nestedSwipeProgressStore,
|
|
2578
|
+
onNestedDrawerPresenceChange,
|
|
2579
|
+
onPopupHeightChange,
|
|
2580
|
+
onNestedFrontmostHeightChange,
|
|
2581
|
+
onNestedSwipingChange,
|
|
2582
|
+
onNestedSwipeProgressChange,
|
|
2583
|
+
notifyParentFrontmostHeight,
|
|
2584
|
+
notifyParentSwipingChange,
|
|
2585
|
+
notifyParentSwipeProgressChange,
|
|
2586
|
+
notifyParentHasNestedDrawer
|
|
2587
|
+
}), [
|
|
2588
|
+
resolvedActiveSnapPoint,
|
|
2589
|
+
frontmostHeight,
|
|
2590
|
+
hasNestedDrawer,
|
|
2591
|
+
nestedSwiping,
|
|
2592
|
+
nestedSwipeProgressStore,
|
|
2593
|
+
notifyParentHasNestedDrawer,
|
|
2594
|
+
notifyParentSwipeProgressChange,
|
|
2595
|
+
notifyParentSwipingChange,
|
|
2596
|
+
notifyParentFrontmostHeight,
|
|
2597
|
+
onNestedDrawerPresenceChange,
|
|
2598
|
+
onNestedFrontmostHeightChange,
|
|
2599
|
+
onNestedSwipeProgressChange,
|
|
2600
|
+
onNestedSwipingChange,
|
|
2601
|
+
onPopupHeightChange,
|
|
2602
|
+
popupHeight,
|
|
2603
|
+
setActiveSnapPoint,
|
|
2604
|
+
snapPoints,
|
|
2605
|
+
snapToSequentialPoints,
|
|
2606
|
+
swipeDirection
|
|
2607
|
+
]);
|
|
2608
|
+
const resolvedChildren = 'function' == typeof children ? (payload)=>/*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
|
|
2609
|
+
children: [
|
|
2610
|
+
_DrawerProviderReport || (_DrawerProviderReport = /*#__PURE__*/ jsx(DrawerProviderReporter, {})),
|
|
2611
|
+
children(payload)
|
|
2612
|
+
]
|
|
2613
|
+
}) : /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
|
|
2614
|
+
children: [
|
|
2615
|
+
_DrawerProviderReport2 || (_DrawerProviderReport2 = /*#__PURE__*/ jsx(DrawerProviderReporter, {})),
|
|
2616
|
+
children
|
|
2617
|
+
]
|
|
2618
|
+
});
|
|
2619
|
+
return /*#__PURE__*/ jsx(DrawerRootContext.Provider, {
|
|
2620
|
+
value: contextValue,
|
|
2621
|
+
children: /*#__PURE__*/ jsx(IsDrawerContext.Provider, {
|
|
2622
|
+
value: true,
|
|
2623
|
+
children: /*#__PURE__*/ jsx(DialogRoot, {
|
|
2624
|
+
open: openProp,
|
|
2625
|
+
defaultOpen: defaultOpen,
|
|
2626
|
+
onOpenChange: handleOpenChange,
|
|
2627
|
+
onOpenChangeComplete: onOpenChangeComplete,
|
|
2628
|
+
disablePointerDismissal: disablePointerDismissal,
|
|
2629
|
+
modal: modal,
|
|
2630
|
+
actionsRef: actionsRef,
|
|
2631
|
+
handle: handle,
|
|
2632
|
+
triggerId: triggerIdProp,
|
|
2633
|
+
defaultTriggerId: defaultTriggerIdProp,
|
|
2634
|
+
children: resolvedChildren
|
|
2635
|
+
})
|
|
2636
|
+
})
|
|
2637
|
+
});
|
|
2638
|
+
}
|
|
2639
|
+
function createNestedSwipeProgressStore() {
|
|
2640
|
+
let progress = 0;
|
|
2641
|
+
const listeners = new Set();
|
|
2642
|
+
return {
|
|
2643
|
+
getSnapshot: ()=>progress,
|
|
2644
|
+
set (nextProgress) {
|
|
2645
|
+
const resolved = Number.isFinite(nextProgress) ? nextProgress : 0;
|
|
2646
|
+
if (resolved === progress) return;
|
|
2647
|
+
progress = resolved;
|
|
2648
|
+
listeners.forEach((listener)=>{
|
|
2649
|
+
listener();
|
|
2650
|
+
});
|
|
2651
|
+
},
|
|
2652
|
+
subscribe (listener) {
|
|
2653
|
+
listeners.add(listener);
|
|
2654
|
+
return ()=>{
|
|
2655
|
+
listeners.delete(listener);
|
|
2656
|
+
};
|
|
2657
|
+
}
|
|
2658
|
+
};
|
|
2659
|
+
}
|
|
2660
|
+
function DrawerProviderReporter() {
|
|
2661
|
+
const drawerId = useId();
|
|
2662
|
+
const providerContext = useDrawerProviderContext(true);
|
|
2663
|
+
const { store } = useDialogRootContext(false);
|
|
2664
|
+
const open = store.useState('open');
|
|
2665
|
+
const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
|
|
2666
|
+
const popupElement = store.useState('popupElement');
|
|
2667
|
+
const isTopmost = 0 === nestedOpenDialogCount;
|
|
2668
|
+
__rspack_external_react.useEffect(()=>{
|
|
2669
|
+
if (!providerContext || null == drawerId) return;
|
|
2670
|
+
return ()=>{
|
|
2671
|
+
providerContext.removeDrawer(drawerId);
|
|
2672
|
+
};
|
|
2673
|
+
}, [
|
|
2674
|
+
drawerId,
|
|
2675
|
+
providerContext
|
|
2676
|
+
]);
|
|
2677
|
+
__rspack_external_react.useEffect(()=>{
|
|
2678
|
+
if (null == drawerId) return;
|
|
2679
|
+
providerContext?.setDrawerOpen(drawerId, open);
|
|
2680
|
+
}, [
|
|
2681
|
+
drawerId,
|
|
2682
|
+
open,
|
|
2683
|
+
providerContext
|
|
2684
|
+
]);
|
|
2685
|
+
__rspack_external_react.useEffect(()=>{
|
|
2686
|
+
if (!open || !isTopmost || !isAndroid) return;
|
|
2687
|
+
const win = getWindow(popupElement);
|
|
2688
|
+
const CloseWatcherCtor = win.CloseWatcher;
|
|
2689
|
+
if (!CloseWatcherCtor) return;
|
|
2690
|
+
function handleCloseWatcher(event) {
|
|
2691
|
+
if (!store.select('open')) return;
|
|
2692
|
+
store.setOpen(false, createChangeEventDetails(reason_parts_closeWatcher, event));
|
|
2693
|
+
}
|
|
2694
|
+
const closeWatcher = new CloseWatcherCtor();
|
|
2695
|
+
const unsubscribe = addEventListener(closeWatcher, 'close', handleCloseWatcher);
|
|
2696
|
+
return ()=>{
|
|
2697
|
+
unsubscribe();
|
|
2698
|
+
closeWatcher.destroy();
|
|
2699
|
+
};
|
|
2700
|
+
}, [
|
|
2701
|
+
store,
|
|
2702
|
+
isTopmost,
|
|
2703
|
+
open,
|
|
2704
|
+
popupElement
|
|
2705
|
+
]);
|
|
2706
|
+
return null;
|
|
2707
|
+
}
|
|
2708
|
+
const DrawerPortal = DialogPortal_DialogPortal;
|
|
2709
|
+
function DrawerProvider(props) {
|
|
2710
|
+
const { children } = props;
|
|
2711
|
+
const [openById, setOpenById] = __rspack_external_react.useState(()=>new Map());
|
|
2712
|
+
const [visualStateStore] = __rspack_external_react.useState(createVisualStateStore);
|
|
2713
|
+
const setDrawerOpen = useStableCallback((drawerId, open)=>{
|
|
2714
|
+
setOpenById((prev)=>{
|
|
2715
|
+
const prevOpen = prev.get(drawerId);
|
|
2716
|
+
if (prevOpen === open) return prev;
|
|
2717
|
+
const next = new Map(prev);
|
|
2718
|
+
next.set(drawerId, open);
|
|
2719
|
+
return next;
|
|
2720
|
+
});
|
|
2721
|
+
});
|
|
2722
|
+
const removeDrawer = useStableCallback((drawerId)=>{
|
|
2723
|
+
setOpenById((prev)=>{
|
|
2724
|
+
if (!prev.has(drawerId)) return prev;
|
|
2725
|
+
const next = new Map(prev);
|
|
2726
|
+
next.delete(drawerId);
|
|
2727
|
+
return next;
|
|
2728
|
+
});
|
|
2729
|
+
});
|
|
2730
|
+
const active = __rspack_external_react.useMemo(()=>{
|
|
2731
|
+
for (const open of openById.values())if (open) return true;
|
|
2732
|
+
return false;
|
|
2733
|
+
}, [
|
|
2734
|
+
openById
|
|
2735
|
+
]);
|
|
2736
|
+
const contextValue = __rspack_external_react.useMemo(()=>({
|
|
2737
|
+
setDrawerOpen,
|
|
2738
|
+
removeDrawer,
|
|
2739
|
+
active,
|
|
2740
|
+
visualStateStore
|
|
2741
|
+
}), [
|
|
2742
|
+
active,
|
|
2743
|
+
removeDrawer,
|
|
2744
|
+
setDrawerOpen,
|
|
2745
|
+
visualStateStore
|
|
2746
|
+
]);
|
|
2747
|
+
return /*#__PURE__*/ jsx(DrawerProviderContext.Provider, {
|
|
2748
|
+
value: contextValue,
|
|
2749
|
+
children: children
|
|
2750
|
+
});
|
|
2751
|
+
}
|
|
2752
|
+
function createVisualStateStore() {
|
|
2753
|
+
let state = {
|
|
2754
|
+
swipeProgress: 0,
|
|
2755
|
+
frontmostHeight: 0
|
|
2756
|
+
};
|
|
2757
|
+
const listeners = new Set();
|
|
2758
|
+
return {
|
|
2759
|
+
getSnapshot: ()=>state,
|
|
2760
|
+
set (nextState) {
|
|
2761
|
+
let nextSwipeProgress = state.swipeProgress;
|
|
2762
|
+
if (void 0 !== nextState.swipeProgress) nextSwipeProgress = Number.isFinite(nextState.swipeProgress) ? nextState.swipeProgress : 0;
|
|
2763
|
+
let nextFrontmostHeight = state.frontmostHeight;
|
|
2764
|
+
if (void 0 !== nextState.frontmostHeight) nextFrontmostHeight = Number.isFinite(nextState.frontmostHeight) ? nextState.frontmostHeight : 0;
|
|
2765
|
+
if (nextSwipeProgress === state.swipeProgress && nextFrontmostHeight === state.frontmostHeight) return;
|
|
2766
|
+
state = {
|
|
2767
|
+
swipeProgress: nextSwipeProgress,
|
|
2768
|
+
frontmostHeight: nextFrontmostHeight
|
|
2769
|
+
};
|
|
2770
|
+
listeners.forEach((listener)=>{
|
|
2771
|
+
listener();
|
|
2772
|
+
});
|
|
2773
|
+
},
|
|
2774
|
+
subscribe (listener) {
|
|
2775
|
+
listeners.add(listener);
|
|
2776
|
+
return ()=>{
|
|
2777
|
+
listeners.delete(listener);
|
|
2778
|
+
};
|
|
2779
|
+
}
|
|
2780
|
+
};
|
|
2781
|
+
}
|
|
5
2782
|
const Drawer_module = {
|
|
6
2783
|
description: "description-hsuUfX",
|
|
7
2784
|
title: "title-A0LbRg",
|
|
8
2785
|
popup: "popup-FjIEpg"
|
|
9
2786
|
};
|
|
10
|
-
const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
2787
|
+
const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(DrawerBackdrop_DrawerBackdrop, {
|
|
11
2788
|
ref: ref,
|
|
12
2789
|
className: clsx(Drawer_module.backdrop, className),
|
|
13
2790
|
...props
|
|
14
2791
|
}));
|
|
15
|
-
const Content = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
2792
|
+
const Content = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(DrawerContent_DrawerContent, {
|
|
16
2793
|
ref: ref,
|
|
17
2794
|
className: clsx(Drawer_module.content, className),
|
|
18
2795
|
...props
|
|
19
2796
|
}));
|
|
20
|
-
const Indent = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
2797
|
+
const Indent = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(DrawerIndent_DrawerIndent, {
|
|
21
2798
|
ref: ref,
|
|
22
2799
|
className: clsx(Drawer_module.indent, className),
|
|
23
2800
|
...props
|
|
24
2801
|
}));
|
|
25
|
-
const IndentBackground = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
2802
|
+
const IndentBackground = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(DrawerIndentBackground_DrawerIndentBackground, {
|
|
26
2803
|
ref: ref,
|
|
27
2804
|
className: clsx(Drawer_module.indentBackground, className),
|
|
28
2805
|
...props
|
|
29
2806
|
}));
|
|
30
|
-
const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
2807
|
+
const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(DrawerPopup_DrawerPopup, {
|
|
31
2808
|
ref: ref,
|
|
32
2809
|
className: clsx(Drawer_module.popup, className),
|
|
33
2810
|
...props
|
|
34
2811
|
}));
|
|
35
|
-
const SwipeArea = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
2812
|
+
const SwipeArea = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(DrawerSwipeArea_DrawerSwipeArea, {
|
|
36
2813
|
ref: ref,
|
|
37
2814
|
className: clsx(Drawer_module.swipeArea, className),
|
|
38
2815
|
...props
|
|
39
2816
|
}));
|
|
40
|
-
const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(
|
|
2817
|
+
const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(DrawerViewport_DrawerViewport, {
|
|
41
2818
|
ref: ref,
|
|
42
2819
|
className: clsx(Drawer_module.viewport, className),
|
|
43
2820
|
...props
|
|
44
2821
|
}));
|
|
45
2822
|
function Trigger({ className, ...props }) {
|
|
46
|
-
return /*#__PURE__*/ jsx(
|
|
2823
|
+
return /*#__PURE__*/ jsx(DrawerTrigger, {
|
|
47
2824
|
...props,
|
|
48
2825
|
className: clsx(Drawer_module.trigger, className)
|
|
49
2826
|
});
|
|
50
2827
|
}
|
|
51
2828
|
function Close({ className, ...props }) {
|
|
52
|
-
return /*#__PURE__*/ jsx(
|
|
2829
|
+
return /*#__PURE__*/ jsx(DrawerClose, {
|
|
53
2830
|
...props,
|
|
54
2831
|
className: clsx(Drawer_module.close, className)
|
|
55
2832
|
});
|
|
56
2833
|
}
|
|
57
2834
|
function Title({ className, ...props }) {
|
|
58
|
-
return /*#__PURE__*/ jsx(
|
|
2835
|
+
return /*#__PURE__*/ jsx(DrawerTitle, {
|
|
59
2836
|
...props,
|
|
60
2837
|
className: clsx(Drawer_module.title, className)
|
|
61
2838
|
});
|
|
62
2839
|
}
|
|
63
2840
|
function Description({ className, ...props }) {
|
|
64
|
-
return /*#__PURE__*/ jsx(
|
|
2841
|
+
return /*#__PURE__*/ jsx(DrawerDescription, {
|
|
65
2842
|
...props,
|
|
66
2843
|
className: clsx(Drawer_module.description, className)
|
|
67
2844
|
});
|
|
68
2845
|
}
|
|
69
|
-
const
|
|
2846
|
+
const Drawer = {
|
|
70
2847
|
Backdrop: Backdrop,
|
|
71
2848
|
Content: Content,
|
|
72
2849
|
Indent: Indent,
|
|
@@ -74,14 +2851,14 @@ const Drawer_Drawer = {
|
|
|
74
2851
|
Popup: Popup,
|
|
75
2852
|
SwipeArea: SwipeArea,
|
|
76
2853
|
Viewport: Viewport,
|
|
77
|
-
Root:
|
|
2854
|
+
Root: DrawerRoot,
|
|
78
2855
|
Trigger: Trigger,
|
|
79
2856
|
Close: Close,
|
|
80
2857
|
Title: Title,
|
|
81
2858
|
Description: Description,
|
|
82
|
-
Portal:
|
|
83
|
-
Provider:
|
|
84
|
-
Handle:
|
|
85
|
-
createHandle:
|
|
2859
|
+
Portal: DrawerPortal,
|
|
2860
|
+
Provider: DrawerProvider,
|
|
2861
|
+
Handle: DialogHandle,
|
|
2862
|
+
createHandle: createDialogHandle
|
|
86
2863
|
};
|
|
87
|
-
export {
|
|
2864
|
+
export { Drawer };
|