@multiplatform.one/forms 7.45.1 → 7.46.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/cjs/FloatingPanel/index.cjs +158 -40
- package/dist/cjs/shared/focusManagement.cjs +3 -3
- package/dist/cjs/shared/focusManagement.native.js +3 -3
- package/dist/cjs/shared/focusManagement.native.js.map +1 -1
- package/dist/cjs/shared/useSheetEscapeDismiss.cjs +5 -4
- package/dist/cjs/shared/useSheetEscapeDismiss.native.js +5 -3
- package/dist/cjs/shared/useSheetEscapeDismiss.native.js.map +1 -1
- package/dist/esm/FloatingPanel/index.mjs +160 -42
- package/dist/esm/FloatingPanel/index.mjs.map +1 -1
- package/dist/esm/shared/focusManagement.mjs +3 -3
- package/dist/esm/shared/focusManagement.mjs.map +1 -1
- package/dist/esm/shared/focusManagement.native.js +3 -3
- package/dist/esm/shared/focusManagement.native.js.map +1 -1
- package/dist/esm/shared/useSheetEscapeDismiss.mjs +5 -4
- package/dist/esm/shared/useSheetEscapeDismiss.mjs.map +1 -1
- package/dist/esm/shared/useSheetEscapeDismiss.native.js +5 -3
- package/dist/esm/shared/useSheetEscapeDismiss.native.js.map +1 -1
- package/dist/jsx/FloatingPanel/index.mjs +160 -42
- package/dist/jsx/FloatingPanel/index.mjs.map +1 -1
- package/dist/jsx/shared/focusManagement.mjs +3 -3
- package/dist/jsx/shared/focusManagement.mjs.map +1 -1
- package/dist/jsx/shared/focusManagement.native.js +3 -3
- package/dist/jsx/shared/focusManagement.native.js.map +1 -1
- package/dist/jsx/shared/useSheetEscapeDismiss.mjs +5 -4
- package/dist/jsx/shared/useSheetEscapeDismiss.mjs.map +1 -1
- package/dist/jsx/shared/useSheetEscapeDismiss.native.js +5 -3
- package/dist/jsx/shared/useSheetEscapeDismiss.native.js.map +1 -1
- package/package.json +8 -8
- package/src/FloatingPanel/FloatingPanel.coverTrigger.spec.tsx +184 -0
- package/src/FloatingPanel/FloatingPanel.spec.tsx +3 -5
- package/src/FloatingPanel/FloatingPanel.stories.tsx +26 -0
- package/src/FloatingPanel/index.tsx +255 -59
- package/src/FloatingPanel/useFloatingPanel.spec.tsx +4 -2
- package/src/shared/focusManagement.spec.tsx +11 -1
- package/src/shared/focusManagement.ts +16 -7
- package/src/shared/interactionHooks.spec.tsx +13 -0
- package/src/shared/useSheetEscapeDismiss.ts +9 -4
- package/types/FloatingPanel/index.d.ts +9 -1
- package/types/FloatingPanel/index.d.ts.map +1 -1
- package/types/shared/focusManagement.d.ts +10 -5
- package/types/shared/focusManagement.d.ts.map +1 -1
- package/types/shared/useSheetEscapeDismiss.d.ts +1 -1
- package/types/shared/useSheetEscapeDismiss.d.ts.map +1 -1
|
@@ -108,8 +108,10 @@ function fixedContainingBlockOrigin(element) {
|
|
|
108
108
|
left: 0
|
|
109
109
|
};
|
|
110
110
|
}
|
|
111
|
-
function isRtl() {
|
|
112
|
-
|
|
111
|
+
function isRtl(element) {
|
|
112
|
+
if (!import_tamagui.isWeb || typeof document === "undefined") return false;
|
|
113
|
+
const direction = element ? getComputedStyle(element).direction : "";
|
|
114
|
+
return direction ? direction === "rtl" : (element?.closest("[dir]") ?? document.documentElement).getAttribute("dir") === "rtl";
|
|
113
115
|
}
|
|
114
116
|
function panelTransformOrigin(placement) {
|
|
115
117
|
const rtl = isRtl();
|
|
@@ -121,37 +123,76 @@ function panelTransformOrigin(placement) {
|
|
|
121
123
|
const ECHO_STRIPPED_ATTRIBUTES = ["id", "for", "name", "data-testid", "aria-label", "aria-controls", "aria-labelledby", "aria-describedby", "aria-activedescendant"];
|
|
122
124
|
function TriggerEchoRow({
|
|
123
125
|
sourceRef,
|
|
124
|
-
onPress
|
|
126
|
+
onPress,
|
|
127
|
+
children,
|
|
128
|
+
anchorRect,
|
|
129
|
+
source
|
|
125
130
|
}) {
|
|
126
131
|
const rowRef = (0, import_react.useRef)(null);
|
|
132
|
+
const visualRef = (0, import_react.useRef)(null);
|
|
127
133
|
(0, import_react.useLayoutEffect)(() => {
|
|
128
134
|
const row = rowRef.current;
|
|
129
|
-
const
|
|
130
|
-
if (!row || !
|
|
131
|
-
const
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
135
|
+
const source2 = sourceRef.current;
|
|
136
|
+
if (!row || !source2 || typeof source2.cloneNode !== "function") return;
|
|
137
|
+
const sync = () => {
|
|
138
|
+
const control = source2.matches(PANEL_FOCUSABLE) ? source2 : source2.querySelector(PANEL_FOCUSABLE);
|
|
139
|
+
const labelledBy = control?.getAttribute("aria-labelledby");
|
|
140
|
+
const label = control?.getAttribute("aria-label") || labelledBy?.split(/\s+/).map(id => document.getElementById(id)?.textContent || "").join(" ") || control?.textContent || source2.textContent || "";
|
|
141
|
+
row.setAttribute("aria-label", label);
|
|
142
|
+
const rect = anchorRect ?? source2.getBoundingClientRect();
|
|
143
|
+
row.style.width = `${rect.width}px`;
|
|
144
|
+
row.style.height = `${rect.height}px`;
|
|
145
|
+
const rtl = isRtl(source2);
|
|
146
|
+
row.style.alignSelf = "flex-start";
|
|
147
|
+
const frameStyle = row.parentElement ? getComputedStyle(row.parentElement) : null;
|
|
148
|
+
row.style.marginTop = `${-(parseFloat(frameStyle?.borderTopWidth || "0") || 0)}px`;
|
|
149
|
+
row.style.position = "sticky";
|
|
150
|
+
row.style.top = row.style.marginTop;
|
|
151
|
+
row.style.zIndex = "1";
|
|
152
|
+
row.style.marginLeft = rtl ? "" : `${-(parseFloat(frameStyle?.borderLeftWidth || "0") || 0)}px`;
|
|
153
|
+
row.style.marginRight = rtl ? `${-(parseFloat(frameStyle?.borderRightWidth || "0") || 0)}px` : "";
|
|
154
|
+
const snapshot = children == null ? source2.cloneNode(true) : visualRef.current;
|
|
155
|
+
if (!snapshot) return;
|
|
156
|
+
const sourceFields = source2.querySelectorAll("input, textarea");
|
|
157
|
+
const snapshotFields = snapshot.querySelectorAll("input, textarea");
|
|
158
|
+
sourceFields.forEach((field, index) => {
|
|
159
|
+
const copy = snapshotFields[index];
|
|
160
|
+
if (copy) copy.value = field.value;
|
|
161
|
+
});
|
|
162
|
+
for (const node of [snapshot, ...Array.from(snapshot.querySelectorAll("*"))]) {
|
|
163
|
+
for (const name of ECHO_STRIPPED_ATTRIBUTES) node.removeAttribute(name);
|
|
164
|
+
if (node.hasAttribute("tabindex") || node.matches("input, textarea, button, a, select")) {
|
|
165
|
+
node.setAttribute("tabindex", "-1");
|
|
166
|
+
}
|
|
142
167
|
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
168
|
+
snapshot.setAttribute("inert", "");
|
|
169
|
+
snapshot.setAttribute("aria-hidden", "true");
|
|
170
|
+
if (children == null) visualRef.current?.replaceChildren(snapshot);
|
|
171
|
+
};
|
|
172
|
+
sync();
|
|
173
|
+
if (typeof ResizeObserver === "undefined") return;
|
|
174
|
+
const observer = new ResizeObserver(sync);
|
|
175
|
+
observer.observe(source2);
|
|
176
|
+
return () => observer.disconnect();
|
|
177
|
+
}, [sourceRef, source, children, anchorRect]);
|
|
147
178
|
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
148
179
|
ref: rowRef,
|
|
149
180
|
"data-fp-trigger-row": "",
|
|
150
|
-
"
|
|
181
|
+
role: "button",
|
|
182
|
+
"aria-expanded": true,
|
|
183
|
+
tabIndex: -1,
|
|
151
184
|
cursor: "pointer",
|
|
152
185
|
onPress,
|
|
153
186
|
flexShrink: 0,
|
|
154
|
-
pointerEvents: "auto"
|
|
187
|
+
pointerEvents: "auto",
|
|
188
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
189
|
+
ref: visualRef,
|
|
190
|
+
pointerEvents: "none",
|
|
191
|
+
"aria-hidden": true,
|
|
192
|
+
children: (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(children, {
|
|
193
|
+
ref: null
|
|
194
|
+
}) : children
|
|
195
|
+
})
|
|
155
196
|
});
|
|
156
197
|
}
|
|
157
198
|
const overlayFloatBreakpoint = import_theme2.OVERLAY_BREAKPOINT;
|
|
@@ -173,6 +214,7 @@ function FloatingPanel(props) {
|
|
|
173
214
|
const shouldUseSheet = props.sheet ?? (!import_tamagui.isWeb || !viewportGtSm);
|
|
174
215
|
const panelProps = {
|
|
175
216
|
...props,
|
|
217
|
+
cover: props.anchorMode ? props.anchorMode === "cover-trigger" : props.cover,
|
|
176
218
|
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme2.Surface, {
|
|
177
219
|
painted: false,
|
|
178
220
|
children: props.children
|
|
@@ -213,7 +255,8 @@ function FloatingPanelSheet({
|
|
|
213
255
|
transition: transitionProp,
|
|
214
256
|
header,
|
|
215
257
|
scrollViewProps,
|
|
216
|
-
openOn = "press"
|
|
258
|
+
openOn = "press",
|
|
259
|
+
escapeTarget = "window"
|
|
217
260
|
}) {
|
|
218
261
|
const {
|
|
219
262
|
knobProps
|
|
@@ -234,7 +277,7 @@ function FloatingPanelSheet({
|
|
|
234
277
|
if (next) setPosition(0);
|
|
235
278
|
onOpenChange(next);
|
|
236
279
|
};
|
|
237
|
-
(0, import_useSheetEscapeDismiss.useSheetEscapeDismiss)(open, () => handleOpenChange(false));
|
|
280
|
+
(0, import_useSheetEscapeDismiss.useSheetEscapeDismiss)(open, () => handleOpenChange(false), escapeTarget);
|
|
238
281
|
const sheetFrameRef = (0, import_react.useRef)(null);
|
|
239
282
|
useParkedFrameInert(open, sheetFrameRef);
|
|
240
283
|
(0, import_focusManagement.useSheetModalFocus)(open, sheetFrameRef, skipReturnFocusRef);
|
|
@@ -255,7 +298,7 @@ function FloatingPanelSheet({
|
|
|
255
298
|
onClickCapture: openFromTrigger
|
|
256
299
|
} : void 0;
|
|
257
300
|
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
258
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
|
|
301
|
+
children: [trigger != null && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
|
|
259
302
|
flexDirection: "row",
|
|
260
303
|
alignItems: "center",
|
|
261
304
|
width: triggerSizing === "content" ? "auto" : "100%",
|
|
@@ -291,6 +334,7 @@ function FloatingPanelSheet({
|
|
|
291
334
|
opacity: 0
|
|
292
335
|
}
|
|
293
336
|
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet.Frame, {
|
|
337
|
+
"data-testid": "floating-panel-sheet",
|
|
294
338
|
...{
|
|
295
339
|
ref: sheetFrameRef,
|
|
296
340
|
tabIndex: -1
|
|
@@ -323,8 +367,12 @@ function FloatingPanelWeb({
|
|
|
323
367
|
contentPadding = "default",
|
|
324
368
|
openOn = "press",
|
|
325
369
|
cover = true,
|
|
326
|
-
triggerEcho = true
|
|
370
|
+
triggerEcho = true,
|
|
371
|
+
triggerRow,
|
|
372
|
+
anchorRect,
|
|
373
|
+
...sheetProps
|
|
327
374
|
}) {
|
|
375
|
+
const [collisionSheet, setCollisionSheet] = (0, import_react.useState)(false);
|
|
328
376
|
const isFill = sizing === "fill";
|
|
329
377
|
const isContextMenu = openOn === "contextmenu";
|
|
330
378
|
const overlayStyleRef = (0, import_react.useRef)(null);
|
|
@@ -350,7 +398,7 @@ function FloatingPanelWeb({
|
|
|
350
398
|
pointPlacementRef.current = null;
|
|
351
399
|
};
|
|
352
400
|
const panel = (0, import_useFloatingPanel.useFloatingPanel)({
|
|
353
|
-
open,
|
|
401
|
+
open: open && !collisionSheet,
|
|
354
402
|
onOpenChange,
|
|
355
403
|
disabled,
|
|
356
404
|
repositionRef: repositionFnRef,
|
|
@@ -361,13 +409,18 @@ function FloatingPanelWeb({
|
|
|
361
409
|
cover,
|
|
362
410
|
onBeforeOpen: resetPosition
|
|
363
411
|
});
|
|
364
|
-
(0, import_focusManagement.useReturnFocusOnClose)(open, skipReturnFocusRef);
|
|
365
|
-
useKeyboardFocusIntoPanel(open && panel.mounted, panel.refs.floating, keyboardOpenRef);
|
|
412
|
+
(0, import_focusManagement.useReturnFocusOnClose)(open, skipReturnFocusRef, panel.refs.floating);
|
|
413
|
+
useKeyboardFocusIntoPanel(open && panel.mounted && !collisionSheet, panel.refs.floating, keyboardOpenRef);
|
|
366
414
|
(0, import_react.useEffect)(() => {
|
|
367
415
|
if (open) return;
|
|
368
416
|
keyboardOpenRef.current = false;
|
|
369
417
|
anchorPointRef.current = null;
|
|
370
418
|
}, [open]);
|
|
419
|
+
(0, import_react.useEffect)(() => {
|
|
420
|
+
if (open || !collisionSheet) return;
|
|
421
|
+
const timer = setTimeout(() => setCollisionSheet(false), (0, import_theme2.motionDurationMs)(panel.knobProps.motion.slide.transition));
|
|
422
|
+
return () => clearTimeout(timer);
|
|
423
|
+
}, [open, collisionSheet, panel.knobProps.motion.slide.transition]);
|
|
371
424
|
const repositionOverlay = (0, import_react.useCallback)(() => {
|
|
372
425
|
const dropdownElement = panel.refs.floating.current;
|
|
373
426
|
const trig = panel.triggerRef.current;
|
|
@@ -378,10 +431,17 @@ function FloatingPanelWeb({
|
|
|
378
431
|
dropdownElement.scrollTop = 0;
|
|
379
432
|
}
|
|
380
433
|
const point = isContextMenu ? anchorPointRef.current ?? (0, import_pointAnchor.referenceCornerPoint)(trig, isRtl()) : null;
|
|
434
|
+
const measured = anchorRect ? {
|
|
435
|
+
...anchorRect,
|
|
436
|
+
top: anchorRect.y,
|
|
437
|
+
left: anchorRect.x,
|
|
438
|
+
right: anchorRect.x + anchorRect.width,
|
|
439
|
+
bottom: anchorRect.y + anchorRect.height
|
|
440
|
+
} : trig.getBoundingClientRect();
|
|
381
441
|
const triggerBounds = point ? {
|
|
382
442
|
top: point.y,
|
|
383
443
|
bottom: point.y
|
|
384
|
-
} :
|
|
444
|
+
} : measured;
|
|
385
445
|
const viewportHeight = window.innerHeight;
|
|
386
446
|
const cs = getComputedStyle(dropdownElement);
|
|
387
447
|
const borderTopWidth = parseFloat(cs.borderTopWidth) || 0;
|
|
@@ -391,6 +451,46 @@ function FloatingPanelWeb({
|
|
|
391
451
|
const totalContentHeight = scrollContentHeight + totalBorderWidth;
|
|
392
452
|
const liveTransition = panel.panelTransition;
|
|
393
453
|
const containingBlock = fixedContainingBlockOrigin(dropdownElement);
|
|
454
|
+
if (cover && !point) {
|
|
455
|
+
const rtl = isRtl(trig);
|
|
456
|
+
const viewport = window.visualViewport;
|
|
457
|
+
const viewportLeft = viewport?.offsetLeft ?? 0;
|
|
458
|
+
const viewportTop = viewport?.offsetTop ?? 0;
|
|
459
|
+
const viewportRight = viewportLeft + (viewport?.width ?? (document.documentElement.clientWidth || window.innerWidth));
|
|
460
|
+
const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
|
|
461
|
+
dropdownElement.style.left = `${viewportLeft - containingBlock.left}px`;
|
|
462
|
+
const layoutStyle = getComputedStyle(dropdownElement);
|
|
463
|
+
const scale = layoutStyle.transform && layoutStyle.transform !== "none" && typeof DOMMatrixReadOnly !== "undefined" ? Math.abs(new DOMMatrixReadOnly(layoutStyle.transform).a) : 1;
|
|
464
|
+
const layoutWidth = dropdownElement.getBoundingClientRect().width / (scale || 1);
|
|
465
|
+
const width = Math.max(layoutWidth || dropdownElement.offsetWidth, measured.width);
|
|
466
|
+
const left = rtl ? measured.right - width : measured.left;
|
|
467
|
+
const firstActionHeight = contentRef.current?.querySelector(PANEL_FOCUSABLE)?.getBoundingClientRect().height || Number(panel.knobProps.menuRow.minHeight) || totalContentHeight;
|
|
468
|
+
const bodyStyle = contentRef.current ? getComputedStyle(contentRef.current) : null;
|
|
469
|
+
const bodyPadding = (parseFloat(bodyStyle?.paddingTop || "0") || 0) + (parseFloat(bodyStyle?.paddingBottom || "0") || 0);
|
|
470
|
+
const neededHeight = sheetProps.scrollable ? Math.min(totalContentHeight, measured.height + firstActionHeight + bodyPadding + totalBorderWidth) : totalContentHeight;
|
|
471
|
+
if (measured.width > 0 && measured.height > 0 && (left < viewportLeft || left + width > Math.max(measured.right, viewportRight - import_useFloatingPanel.panelViewportPadding) || measured.right > viewportRight || measured.top < viewportTop || measured.top + Math.max(neededHeight, measured.height) > viewportBottom - import_useFloatingPanel.panelViewportPadding)) {
|
|
472
|
+
dropdownElement.style.visibility = "hidden";
|
|
473
|
+
setCollisionSheet(true);
|
|
474
|
+
return;
|
|
475
|
+
}
|
|
476
|
+
const top2 = measured.top - containingBlock.top;
|
|
477
|
+
const cssLeft2 = left - containingBlock.left;
|
|
478
|
+
const maxHeight = Math.max(0, viewportBottom - import_useFloatingPanel.panelViewportPadding - measured.top);
|
|
479
|
+
dropdownElement.style.top = `${top2}px`;
|
|
480
|
+
dropdownElement.style.left = `${cssLeft2}px`;
|
|
481
|
+
dropdownElement.style.maxHeight = `${maxHeight}px`;
|
|
482
|
+
dropdownElement.dir = rtl ? "rtl" : "ltr";
|
|
483
|
+
dropdownElement.style.transformOrigin = rtl ? "top right" : "top left";
|
|
484
|
+
dropdownElement.style.visibility = "visible";
|
|
485
|
+
overlayStyleRef.current = {
|
|
486
|
+
top: top2,
|
|
487
|
+
left: cssLeft2,
|
|
488
|
+
maxHeight
|
|
489
|
+
};
|
|
490
|
+
panel.initializingRef.current = false;
|
|
491
|
+
if (isInitial) dropdownElement.style.transition = liveTransition;
|
|
492
|
+
return;
|
|
493
|
+
}
|
|
394
494
|
let isDropup = panel.placement.startsWith("top");
|
|
395
495
|
let cssLeft;
|
|
396
496
|
if (point) {
|
|
@@ -511,13 +611,14 @@ function FloatingPanelWeb({
|
|
|
511
611
|
});
|
|
512
612
|
}
|
|
513
613
|
});
|
|
514
|
-
}, [isFill, isContextMenu, cover, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
|
|
614
|
+
}, [isFill, isContextMenu, cover, anchorRect, sheetProps.scrollable, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
|
|
515
615
|
repositionFnRef.current = repositionOverlay;
|
|
516
616
|
const click = (0, import_react2.useClick)(panel.context, {
|
|
517
617
|
event: "mousedown",
|
|
518
|
-
enabled: !isContextMenu
|
|
618
|
+
enabled: !isContextMenu && !collisionSheet
|
|
519
619
|
});
|
|
520
620
|
const dismiss = (0, import_react2.useDismiss)(panel.context, {
|
|
621
|
+
enabled: !collisionSheet,
|
|
521
622
|
// Use 'click' instead of default 'pointerdown' so scrolling to the bottom
|
|
522
623
|
// (e.g. via wheel/trackpad or scroll arrow hover) doesn't trigger outside-press.
|
|
523
624
|
outsidePressEvent: "click",
|
|
@@ -532,10 +633,10 @@ function FloatingPanelWeb({
|
|
|
532
633
|
(0, import_react.useLayoutEffect)(() => {
|
|
533
634
|
if (!open || !panel.mounted) return;
|
|
534
635
|
repositionOverlay();
|
|
535
|
-
}, [open, panel.mounted, repositionOverlay, panel.y]);
|
|
636
|
+
}, [open, panel.mounted, repositionOverlay, panel.y, panel.x]);
|
|
536
637
|
(0, import_react.useLayoutEffect)(() => {
|
|
537
638
|
const content = contentRef.current;
|
|
538
|
-
if (!open || !panel.mounted || !isFill || !content || typeof ResizeObserver === "undefined") {
|
|
639
|
+
if (!open || !panel.mounted || !isFill && !cover || !content || typeof ResizeObserver === "undefined") {
|
|
539
640
|
return;
|
|
540
641
|
}
|
|
541
642
|
let frame = 0;
|
|
@@ -547,15 +648,16 @@ function FloatingPanelWeb({
|
|
|
547
648
|
});
|
|
548
649
|
});
|
|
549
650
|
observer.observe(content);
|
|
651
|
+
if (panel.triggerRef.current) observer.observe(panel.triggerRef.current);
|
|
550
652
|
return () => {
|
|
551
653
|
observer.disconnect();
|
|
552
654
|
if (frame) cancelAnimationFrame(frame);
|
|
553
655
|
};
|
|
554
|
-
}, [open, panel.mounted, isFill, repositionOverlay]);
|
|
656
|
+
}, [open, panel.mounted, isFill, cover, repositionOverlay, panel.triggerRef]);
|
|
555
657
|
const handleScroll = (0, import_react.useCallback)(event => {
|
|
556
658
|
const el = event.target;
|
|
557
659
|
panel.updateArrows(el);
|
|
558
|
-
if (isFill) return;
|
|
660
|
+
if (isFill || cover && !isContextMenu) return;
|
|
559
661
|
if (panel.initializingRef.current) {
|
|
560
662
|
lastScrollTopRef.current = el.scrollTop;
|
|
561
663
|
return;
|
|
@@ -578,7 +680,7 @@ function FloatingPanelWeb({
|
|
|
578
680
|
grownRef.current = true;
|
|
579
681
|
repositionFnRef.current?.();
|
|
580
682
|
}
|
|
581
|
-
}, [isFill, panel.updateArrows]);
|
|
683
|
+
}, [isFill, cover, isContextMenu, panel.updateArrows]);
|
|
582
684
|
const webTransition = panel.panelTransition;
|
|
583
685
|
const {
|
|
584
686
|
style: elevatedSurfaceStyle,
|
|
@@ -633,11 +735,21 @@ function FloatingPanelWeb({
|
|
|
633
735
|
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
634
736
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
635
737
|
...referenceProps,
|
|
738
|
+
alignSelf: sheetProps.triggerSizing === "content" ? "flex-start" : void 0,
|
|
636
739
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
637
740
|
opacity: disabled ? 0.5 : 1,
|
|
638
741
|
"data-fp-reference": "",
|
|
639
742
|
children: trigger
|
|
640
|
-
}),
|
|
743
|
+
}), collisionSheet && /* @__PURE__ */(0, import_jsx_runtime.jsx)(FloatingPanelSheet, {
|
|
744
|
+
...sheetProps,
|
|
745
|
+
open,
|
|
746
|
+
onOpenChange,
|
|
747
|
+
trigger: null,
|
|
748
|
+
escapeTarget: "document",
|
|
749
|
+
skipReturnFocusRef,
|
|
750
|
+
contentPadding,
|
|
751
|
+
children
|
|
752
|
+
}), panel.mounted && !collisionSheet && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PanelPortal.PanelPortal, {
|
|
641
753
|
anchor: panel.triggerRef.current,
|
|
642
754
|
children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
|
|
643
755
|
...getFloatingProps({
|
|
@@ -650,6 +762,9 @@ function FloatingPanelWeb({
|
|
|
650
762
|
scrollbarWidth: "none",
|
|
651
763
|
zIndex: import_zIndex.zIndex.dropdown,
|
|
652
764
|
overflow: "auto",
|
|
765
|
+
...(cover && !isContextMenu ? {
|
|
766
|
+
overflowX: "hidden"
|
|
767
|
+
} : {}),
|
|
653
768
|
...panel.floatingStyleRef.current,
|
|
654
769
|
...(overlayStyleRef.current ? {
|
|
655
770
|
maxHeight: overlayStyleRef.current.maxHeight
|
|
@@ -660,7 +775,7 @@ function FloatingPanelWeb({
|
|
|
660
775
|
// then positions against this box and is clipped by its scroll.
|
|
661
776
|
transform: panel.visible ? "none" : "scale(0.96)",
|
|
662
777
|
transition: webTransition,
|
|
663
|
-
transformOrigin: panelTransformOrigin(pointPlacementRef.current ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}` : panel.placement)
|
|
778
|
+
transformOrigin: cover && !isContextMenu ? isRtl(panel.triggerRef.current) ? "top right" : "top left" : panelTransformOrigin(pointPlacementRef.current ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}` : panel.placement)
|
|
664
779
|
},
|
|
665
780
|
onScroll: handleScroll,
|
|
666
781
|
onTransitionEnd: event => {
|
|
@@ -678,7 +793,10 @@ function FloatingPanelWeb({
|
|
|
678
793
|
paddingVertical: 0,
|
|
679
794
|
children: [isContextMenu || !cover || !triggerEcho ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerEchoRow, {
|
|
680
795
|
sourceRef: panel.triggerRef,
|
|
681
|
-
|
|
796
|
+
source: trigger,
|
|
797
|
+
anchorRect,
|
|
798
|
+
onPress: () => onOpenChange(false),
|
|
799
|
+
children: triggerRow
|
|
682
800
|
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
|
|
683
801
|
direction: "up",
|
|
684
802
|
scrollRef: panel.refs.floating,
|
|
@@ -72,7 +72,7 @@ function restoreLater(prevRef, generationRef, delayMs, insideRef, skipReturnFocu
|
|
|
72
72
|
requestAnimationFrame(() => requestAnimationFrame(restore));
|
|
73
73
|
setTimeout(restore, delayMs);
|
|
74
74
|
}
|
|
75
|
-
function useReturnFocusOnClose(open, skipReturnFocusRef) {
|
|
75
|
+
function useReturnFocusOnClose(open, skipReturnFocusRef, insideRef) {
|
|
76
76
|
const {
|
|
77
77
|
prevRef,
|
|
78
78
|
generationRef
|
|
@@ -84,8 +84,8 @@ function useReturnFocusOnClose(open, skipReturnFocusRef) {
|
|
|
84
84
|
restoreDelayMsRef.current = (0, import_theme.motionHideDelayMs)(knobProps.motion.scrim.transition);
|
|
85
85
|
(0, import_react.useEffect)(() => {
|
|
86
86
|
if (!canUseDom() || !open) return;
|
|
87
|
-
return () => restoreLater(prevRef, generationRef, restoreDelayMsRef.current,
|
|
88
|
-
}, [open, prevRef, generationRef, skipReturnFocusRef]);
|
|
87
|
+
return () => restoreLater(prevRef, generationRef, restoreDelayMsRef.current, insideRef, skipReturnFocusRef);
|
|
88
|
+
}, [open, prevRef, generationRef, skipReturnFocusRef, insideRef]);
|
|
89
89
|
}
|
|
90
90
|
function useSheetModalFocus(open, frameRef, skipReturnFocusRef) {
|
|
91
91
|
const {
|
|
@@ -88,7 +88,7 @@ function restoreLater(prevRef, generationRef, delayMs, insideRef, skipReturnFocu
|
|
|
88
88
|
});
|
|
89
89
|
setTimeout(restore, delayMs);
|
|
90
90
|
}
|
|
91
|
-
function useReturnFocusOnClose(open, skipReturnFocusRef) {
|
|
91
|
+
function useReturnFocusOnClose(open, skipReturnFocusRef, insideRef) {
|
|
92
92
|
var {
|
|
93
93
|
prevRef,
|
|
94
94
|
generationRef
|
|
@@ -101,9 +101,9 @@ function useReturnFocusOnClose(open, skipReturnFocusRef) {
|
|
|
101
101
|
(0, import_react.useEffect)(function () {
|
|
102
102
|
if (!canUseDom() || !open) return;
|
|
103
103
|
return function () {
|
|
104
|
-
return restoreLater(prevRef, generationRef, restoreDelayMsRef.current,
|
|
104
|
+
return restoreLater(prevRef, generationRef, restoreDelayMsRef.current, insideRef, skipReturnFocusRef);
|
|
105
105
|
};
|
|
106
|
-
}, [open, prevRef, generationRef, skipReturnFocusRef]);
|
|
106
|
+
}, [open, prevRef, generationRef, skipReturnFocusRef, insideRef]);
|
|
107
107
|
}
|
|
108
108
|
function useSheetModalFocus(open, frameRef, skipReturnFocusRef) {
|
|
109
109
|
var {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","focusManagement_exports","__export","DialogShowFocus","useDialogShowFocus","useReturnFocusOnClose","useSheetModalFocus","module","exports","import_react","require","import_tamagui","import_theme","_instanceof","left","right","Symbol","hasInstance","FOCUSABLE","canUseDom","canUseDom2","isWeb","document","focusIsDropped","insideEl","ae","activeElement","body","documentElement","contains","useCaptureOnOpen","open","prevRef","useRef","wasOpenRef","generationRef","current","restoreLater","delayMs","insideRef","skipReturnFocusRef","generation","restore","restore2","_ref","target","isConnected","focus","preventScroll","focusVisible","wasKeyboardFocus","requestAnimationFrame","setTimeout","knobProps","useResolvedKnobs","restoreDelayMsRef","motionHideDelayMs","motion","scrim","transition","useEffect","frameRef","frame","addEventListener","focusIn","focusIn2","first","querySelector","innerRaf","raf","onKeyDown","onKeyDown2","e","key","focusables","Array","from","querySelectorAll","filter","el","offsetWidth","offsetHeight","length","preventDefault","last","shiftKey","cancelAnimationFrame","removeEventListener"],"sources":["../../../src/shared/focusManagement.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,uBAAA;AAAAC,QAAA,CAAAD,uBAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA,eAAA;EAAAC,kBAAA,EAAAA,CAAA,KAAAA,kBAAA;EAAAC,qBAAA,EAAAA,CAAA,KAAAA,qBAAA;EAAAC,kBAAA,EAAAA,CAAA,KAAAA;AAAA;AAoCAC,MAAA,CAAAC,OAAA,GAAAZ,YAAkD,CAAAK,uBAAA;AAClD,IAAAQ,YAAA,GAAAC,OAAwC;AACxC,IAAAC,cAAA,GAAsED,OAAA;AAEtE,IAAAE,YAAM,GACJF,OAAA;AAEF,SAAMG,WAAYA,CAAAC,IAAM,EAAAC,KAAA;EAExB,2BAAwB;;EACtB,IAAAA,KAAM,IAAK,QAAS,OAAAC,MAAA,oBAAAD,KAAA,CAAAC,MAAA,CAAAC,WAAA;IACpB,OAAK,EAAMF,KAAA,CAAAC,MAAO,CAAAC,WAAiB,EAAAH,IAAA,CAAO;EAG1C,OAAI;IACJ,OAAOA,IAAA,YAAAC,KAAA;EACT;AAGA;AACE,IAAAG,SAAM,8IAAyC;AAC/C,IAAAC,SAAM,YAAaC,WAAA;EACnB,OAAMT,cAAA,CAAAU,KAAgB,WAAAC,QAAA,KAAQ;AAC9B;AACE,SAAIC,cAASA,CAAAC,QAAW;EACxB,IAAAC,EAAI,GAAAH,QAAS,CAAAI,aAAW;EACtB,KAAAD,EAAA,IAAAA,EAAQ,KAAAH,QAAU,CAAAK,IAAS,IAAAF,EAAA,KAAAH,QAAA,CAAAM,eAAA;EAAA,IAC7BJ,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAAK,QAAA,CAAAJ,EAAA;EACA;AAAqB;AAEvB,SAAOK,gBAAWA,CAAAC,IAAA;EACpB,IAAAC,OAAA,OAAAvB,YAAA,CAAAwB,MAAA;EAEA,IAAAC,UAAS,OACPzB,YACA,CAAAwB,MAAA,OACA;EAIA,IAAAE,aAAM,GAAa,IAAA1B,YAAc,CAAAwB,MAAA;EACjC,IAAAd,SAAM,IAAU;IAId,IAAIY,IAAC,KAAAG,UAAa,CAAAE,OAAA,EAAAD,aAAA,CAAAC,OAAA;IAClB,IAAIL,IAAA,KAAAG,UAAA,CAAoBE,OAAA;MACxBJ,OAAM,CAAAI,OAAS,GAAAd,QAAQ,CAAAI,aAAA;IACvB;IACAQ,UAAI,CAAAE,OAAA,GAAeL,IAAA;EACjB;EAAa,OACX;IAAeC,OACf;IAA+BG;EAChB;AACnB;AAIF,SAAAE,aAAAL,OAAsB,EAAMG,aAAA,EAAAG,OAAsB,EAAAC,SAAQ,EAAAC,kBAAA;EAC1D,IAAAC,UAAW,GAAAN,aAAgB,CAAAC,OAAA;EAC7B,IAAAM,OAAA,YAAAC,SAAA;
|
|
1
|
+
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","focusManagement_exports","__export","DialogShowFocus","useDialogShowFocus","useReturnFocusOnClose","useSheetModalFocus","module","exports","import_react","require","import_tamagui","import_theme","_instanceof","left","right","Symbol","hasInstance","FOCUSABLE","canUseDom","canUseDom2","isWeb","document","focusIsDropped","insideEl","ae","activeElement","body","documentElement","contains","useCaptureOnOpen","open","prevRef","useRef","wasOpenRef","generationRef","current","restoreLater","delayMs","insideRef","skipReturnFocusRef","generation","restore","restore2","_ref","target","isConnected","focus","preventScroll","focusVisible","wasKeyboardFocus","requestAnimationFrame","setTimeout","knobProps","useResolvedKnobs","restoreDelayMsRef","motionHideDelayMs","motion","scrim","transition","useEffect","frameRef","frame","addEventListener","focusIn","focusIn2","first","querySelector","innerRaf","raf","onKeyDown","onKeyDown2","e","key","focusables","Array","from","querySelectorAll","filter","el","offsetWidth","offsetHeight","length","preventDefault","last","shiftKey","cancelAnimationFrame","removeEventListener"],"sources":["../../../src/shared/focusManagement.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
|
@@ -27,7 +27,7 @@ __export(useSheetEscapeDismiss_exports, {
|
|
|
27
27
|
module.exports = __toCommonJS(useSheetEscapeDismiss_exports);
|
|
28
28
|
var import_react = require("react");
|
|
29
29
|
var import_tamagui = require("tamagui");
|
|
30
|
-
function useSheetEscapeDismiss(enabled, onDismiss) {
|
|
30
|
+
function useSheetEscapeDismiss(enabled, onDismiss, target = "window") {
|
|
31
31
|
const onDismissRef = (0, import_react.useRef)(onDismiss);
|
|
32
32
|
onDismissRef.current = onDismiss;
|
|
33
33
|
(0, import_react.useEffect)(() => {
|
|
@@ -36,7 +36,8 @@ function useSheetEscapeDismiss(enabled, onDismiss) {
|
|
|
36
36
|
if (event.key !== "Escape" || event.defaultPrevented) return;
|
|
37
37
|
onDismissRef.current();
|
|
38
38
|
};
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
const node = target === "document" ? document : window;
|
|
40
|
+
node.addEventListener("keydown", onKeyDown);
|
|
41
|
+
return () => node.removeEventListener("keydown", onKeyDown);
|
|
42
|
+
}, [enabled, target]);
|
|
42
43
|
}
|
|
@@ -30,6 +30,7 @@ module.exports = __toCommonJS(useSheetEscapeDismiss_exports);
|
|
|
30
30
|
var import_react = require("react");
|
|
31
31
|
var import_tamagui = require("tamagui");
|
|
32
32
|
function useSheetEscapeDismiss(enabled, onDismiss) {
|
|
33
|
+
var target = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "window";
|
|
33
34
|
var onDismissRef = (0, import_react.useRef)(onDismiss);
|
|
34
35
|
onDismissRef.current = onDismiss;
|
|
35
36
|
(0, import_react.useEffect)(function () {
|
|
@@ -38,10 +39,11 @@ function useSheetEscapeDismiss(enabled, onDismiss) {
|
|
|
38
39
|
if (event.key !== "Escape" || event.defaultPrevented) return;
|
|
39
40
|
onDismissRef.current();
|
|
40
41
|
};
|
|
41
|
-
|
|
42
|
+
var node = target === "document" ? document : window;
|
|
43
|
+
node.addEventListener("keydown", onKeyDown);
|
|
42
44
|
return function () {
|
|
43
|
-
return
|
|
45
|
+
return node.removeEventListener("keydown", onKeyDown);
|
|
44
46
|
};
|
|
45
|
-
}, [enabled]);
|
|
47
|
+
}, [enabled, target]);
|
|
46
48
|
}
|
|
47
49
|
//# sourceMappingURL=useSheetEscapeDismiss.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","useSheetEscapeDismiss_exports","__export","useSheetEscapeDismiss","module","exports","import_react","require","import_tamagui","enabled","onDismiss","onDismissRef","useRef","current","useEffect","isWeb","onKeyDown","onKeyDown2","event","key","defaultPrevented","
|
|
1
|
+
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","useSheetEscapeDismiss_exports","__export","useSheetEscapeDismiss","module","exports","import_react","require","import_tamagui","enabled","onDismiss","target","arguments","length","onDismissRef","useRef","current","useEffect","isWeb","onKeyDown","onKeyDown2","event","key","defaultPrevented","node","document","window","addEventListener"],"sources":["../../../src/shared/useSheetEscapeDismiss.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,6BAAA;AAAAC,QAAA,CAAAD,6BAAA;EAAAE,qBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkC,CAAAK,6BAAA;AAClC,IAAAK,YAAA,GAAAC,OAAsB;AAYf,IAAAC,cAAS,GAAAD,OAAA,UACd;AAIA,SAAMJ,qBAAeA,CAAAM,OAAA,EAAAC,SAAO;EAC5B,IAAAC,MAAA,GAAaC,SAAA,CAAUC,MAAA,QAAAD,SAAA,iBAAAA,SAAA;EACvB,IAAAE,YAAA,OAAAR,YAAgB,CAAAS,MAAA,EAAAL,SAAA;EACdI,YAAK,CAAAE,OAAA,GAAAN,SAAU;EACf,IAAAJ,YAAM,CAAAW,SAAa,cAAyB;IAC1C,KAAAT,cAAU,CAAQU,KAAA,KAAAT,OAAY,EAAM;IACpC,IAAAU,SAAA,GAAa,SAAQC,WAAAC,KAAA;MACvB,IAAAA,KAAA,CAAAC,GAAA,iBAAAD,KAAA,CAAAE,gBAAA;MACAT,YAAa,CAAAE,OAAA,EAAW;IACxB;IACA,IAAAQ,IAAO,GAAAb,MAAM,KAAK,aAAAc,QAAoB,GAAAC,MAAW;IACnDF,IAAI,CAAAG,gBAAgB,YAAAR,SAAA;IACtB","ignoreList":[]}
|