908 lines
36 KiB
JavaScript
908 lines
36 KiB
JavaScript
"use client";
|
|
import {
|
|
VisuallyHidden
|
|
} from "./chunk-3GV3KT4M.js";
|
|
import {
|
|
createCollection
|
|
} from "./chunk-6SPNF6KQ.js";
|
|
import {
|
|
useEscapeKeydown
|
|
} from "./chunk-J3JCCWF4.js";
|
|
import {
|
|
useControllableState
|
|
} from "./chunk-H4VE5LV5.js";
|
|
import {
|
|
Presence
|
|
} from "./chunk-TZDCYJOT.js";
|
|
import {
|
|
createContextScope
|
|
} from "./chunk-OAV3HHWW.js";
|
|
import {
|
|
composeEventHandlers,
|
|
useCallbackRef,
|
|
useLayoutEffect2
|
|
} from "./chunk-SZRZRZSM.js";
|
|
import {
|
|
Primitive,
|
|
dispatchDiscreteCustomEvent
|
|
} from "./chunk-H55D7VYG.js";
|
|
import {
|
|
require_react_dom
|
|
} from "./chunk-R6S4VRB5.js";
|
|
import {
|
|
useComposedRefs
|
|
} from "./chunk-4WIT4MX7.js";
|
|
import {
|
|
require_jsx_runtime
|
|
} from "./chunk-S77I6LSE.js";
|
|
import {
|
|
require_react
|
|
} from "./chunk-3TFVT2CW.js";
|
|
import {
|
|
__toESM
|
|
} from "./chunk-4MBMRILA.js";
|
|
|
|
// node_modules/@radix-ui/react-toast/dist/index.mjs
|
|
var React3 = __toESM(require_react(), 1);
|
|
var ReactDOM2 = __toESM(require_react_dom(), 1);
|
|
|
|
// node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
|
|
var React = __toESM(require_react(), 1);
|
|
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
|
|
var DISMISSABLE_LAYER_NAME = "DismissableLayer";
|
|
var CONTEXT_UPDATE = "dismissableLayer.update";
|
|
var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
|
|
var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
|
|
var originalBodyPointerEvents;
|
|
var DismissableLayerContext = React.createContext({
|
|
layers: /* @__PURE__ */ new Set(),
|
|
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
|
|
branches: /* @__PURE__ */ new Set()
|
|
});
|
|
var DismissableLayer = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
disableOutsidePointerEvents = false,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside,
|
|
onInteractOutside,
|
|
onDismiss,
|
|
...layerProps
|
|
} = props;
|
|
const context = React.useContext(DismissableLayerContext);
|
|
const [node, setNode] = React.useState(null);
|
|
const ownerDocument = (node == null ? void 0 : node.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document);
|
|
const [, force] = React.useState({});
|
|
const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
|
|
const layers = Array.from(context.layers);
|
|
const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
|
|
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
|
|
const index = node ? layers.indexOf(node) : -1;
|
|
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
|
|
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
|
|
const pointerDownOutside = usePointerDownOutside((event) => {
|
|
const target = event.target;
|
|
const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
|
|
onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
|
|
onInteractOutside == null ? void 0 : onInteractOutside(event);
|
|
if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
|
|
}, ownerDocument);
|
|
const focusOutside = useFocusOutside((event) => {
|
|
const target = event.target;
|
|
const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
if (isFocusInBranch) return;
|
|
onFocusOutside == null ? void 0 : onFocusOutside(event);
|
|
onInteractOutside == null ? void 0 : onInteractOutside(event);
|
|
if (!event.defaultPrevented) onDismiss == null ? void 0 : onDismiss();
|
|
}, ownerDocument);
|
|
useEscapeKeydown((event) => {
|
|
const isHighestLayer = index === context.layers.size - 1;
|
|
if (!isHighestLayer) return;
|
|
onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event);
|
|
if (!event.defaultPrevented && onDismiss) {
|
|
event.preventDefault();
|
|
onDismiss();
|
|
}
|
|
}, ownerDocument);
|
|
React.useEffect(() => {
|
|
if (!node) return;
|
|
if (disableOutsidePointerEvents) {
|
|
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
|
|
originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
|
|
ownerDocument.body.style.pointerEvents = "none";
|
|
}
|
|
context.layersWithOutsidePointerEventsDisabled.add(node);
|
|
}
|
|
context.layers.add(node);
|
|
dispatchUpdate();
|
|
return () => {
|
|
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
|
|
ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
|
|
}
|
|
};
|
|
}, [node, ownerDocument, disableOutsidePointerEvents, context]);
|
|
React.useEffect(() => {
|
|
return () => {
|
|
if (!node) return;
|
|
context.layers.delete(node);
|
|
context.layersWithOutsidePointerEventsDisabled.delete(node);
|
|
dispatchUpdate();
|
|
};
|
|
}, [node, context]);
|
|
React.useEffect(() => {
|
|
const handleUpdate = () => force({});
|
|
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
}, []);
|
|
return (0, import_jsx_runtime.jsx)(
|
|
Primitive.div,
|
|
{
|
|
...layerProps,
|
|
ref: composedRefs,
|
|
style: {
|
|
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
|
|
...props.style
|
|
},
|
|
onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
|
|
onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
|
|
onPointerDownCapture: composeEventHandlers(
|
|
props.onPointerDownCapture,
|
|
pointerDownOutside.onPointerDownCapture
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
|
|
var BRANCH_NAME = "DismissableLayerBranch";
|
|
var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
|
|
const context = React.useContext(DismissableLayerContext);
|
|
const ref = React.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
React.useEffect(() => {
|
|
const node = ref.current;
|
|
if (node) {
|
|
context.branches.add(node);
|
|
return () => {
|
|
context.branches.delete(node);
|
|
};
|
|
}
|
|
}, [context.branches]);
|
|
return (0, import_jsx_runtime.jsx)(Primitive.div, { ...props, ref: composedRefs });
|
|
});
|
|
DismissableLayerBranch.displayName = BRANCH_NAME;
|
|
function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
|
|
const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
|
|
const isPointerInsideReactTreeRef = React.useRef(false);
|
|
const handleClickRef = React.useRef(() => {
|
|
});
|
|
React.useEffect(() => {
|
|
const handlePointerDown = (event) => {
|
|
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
let handleAndDispatchPointerDownOutsideEvent2 = function() {
|
|
handleAndDispatchCustomEvent(
|
|
POINTER_DOWN_OUTSIDE,
|
|
handlePointerDownOutside,
|
|
eventDetail,
|
|
{ discrete: true }
|
|
);
|
|
};
|
|
var handleAndDispatchPointerDownOutsideEvent = handleAndDispatchPointerDownOutsideEvent2;
|
|
const eventDetail = { originalEvent: event };
|
|
if (event.pointerType === "touch") {
|
|
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
|
|
ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
|
|
} else {
|
|
handleAndDispatchPointerDownOutsideEvent2();
|
|
}
|
|
} else {
|
|
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
}
|
|
isPointerInsideReactTreeRef.current = false;
|
|
};
|
|
const timerId = window.setTimeout(() => {
|
|
ownerDocument.addEventListener("pointerdown", handlePointerDown);
|
|
}, 0);
|
|
return () => {
|
|
window.clearTimeout(timerId);
|
|
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
|
|
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
};
|
|
}, [ownerDocument, handlePointerDownOutside]);
|
|
return {
|
|
// ensures we check React component tree (not just DOM tree)
|
|
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
};
|
|
}
|
|
function useFocusOutside(onFocusOutside, ownerDocument = globalThis == null ? void 0 : globalThis.document) {
|
|
const handleFocusOutside = useCallbackRef(onFocusOutside);
|
|
const isFocusInsideReactTreeRef = React.useRef(false);
|
|
React.useEffect(() => {
|
|
const handleFocus = (event) => {
|
|
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
const eventDetail = { originalEvent: event };
|
|
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
discrete: false
|
|
});
|
|
}
|
|
};
|
|
ownerDocument.addEventListener("focusin", handleFocus);
|
|
return () => ownerDocument.removeEventListener("focusin", handleFocus);
|
|
}, [ownerDocument, handleFocusOutside]);
|
|
return {
|
|
onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
|
|
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
|
|
};
|
|
}
|
|
function dispatchUpdate() {
|
|
const event = new CustomEvent(CONTEXT_UPDATE);
|
|
document.dispatchEvent(event);
|
|
}
|
|
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
const target = detail.originalEvent.target;
|
|
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
|
|
if (handler) target.addEventListener(name, handler, { once: true });
|
|
if (discrete) {
|
|
dispatchDiscreteCustomEvent(target, event);
|
|
} else {
|
|
target.dispatchEvent(event);
|
|
}
|
|
}
|
|
var Root = DismissableLayer;
|
|
var Branch = DismissableLayerBranch;
|
|
|
|
// node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-portal/dist/index.mjs
|
|
var React2 = __toESM(require_react(), 1);
|
|
var import_react_dom = __toESM(require_react_dom(), 1);
|
|
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
|
|
var PORTAL_NAME = "Portal";
|
|
var Portal = React2.forwardRef((props, forwardedRef) => {
|
|
var _a;
|
|
const { container: containerProp, ...portalProps } = props;
|
|
const [mounted, setMounted] = React2.useState(false);
|
|
useLayoutEffect2(() => setMounted(true), []);
|
|
const container = containerProp || mounted && ((_a = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : _a.body);
|
|
return container ? import_react_dom.default.createPortal((0, import_jsx_runtime2.jsx)(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
|
|
});
|
|
Portal.displayName = PORTAL_NAME;
|
|
|
|
// node_modules/@radix-ui/react-toast/dist/index.mjs
|
|
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
|
|
var PROVIDER_NAME = "ToastProvider";
|
|
var [Collection, useCollection, createCollectionScope] = createCollection("Toast");
|
|
var [createToastContext, createToastScope] = createContextScope("Toast", [createCollectionScope]);
|
|
var [ToastProviderProvider, useToastProviderContext] = createToastContext(PROVIDER_NAME);
|
|
var ToastProvider = (props) => {
|
|
const {
|
|
__scopeToast,
|
|
label = "Notification",
|
|
duration = 5e3,
|
|
swipeDirection = "right",
|
|
swipeThreshold = 50,
|
|
children
|
|
} = props;
|
|
const [viewport, setViewport] = React3.useState(null);
|
|
const [toastCount, setToastCount] = React3.useState(0);
|
|
const isFocusedToastEscapeKeyDownRef = React3.useRef(false);
|
|
const isClosePausedRef = React3.useRef(false);
|
|
if (!label.trim()) {
|
|
console.error(
|
|
`Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`
|
|
);
|
|
}
|
|
return (0, import_jsx_runtime3.jsx)(Collection.Provider, { scope: __scopeToast, children: (0, import_jsx_runtime3.jsx)(
|
|
ToastProviderProvider,
|
|
{
|
|
scope: __scopeToast,
|
|
label,
|
|
duration,
|
|
swipeDirection,
|
|
swipeThreshold,
|
|
toastCount,
|
|
viewport,
|
|
onViewportChange: setViewport,
|
|
onToastAdd: React3.useCallback(() => setToastCount((prevCount) => prevCount + 1), []),
|
|
onToastRemove: React3.useCallback(() => setToastCount((prevCount) => prevCount - 1), []),
|
|
isFocusedToastEscapeKeyDownRef,
|
|
isClosePausedRef,
|
|
children
|
|
}
|
|
) });
|
|
};
|
|
ToastProvider.displayName = PROVIDER_NAME;
|
|
var VIEWPORT_NAME = "ToastViewport";
|
|
var VIEWPORT_DEFAULT_HOTKEY = ["F8"];
|
|
var VIEWPORT_PAUSE = "toast.viewportPause";
|
|
var VIEWPORT_RESUME = "toast.viewportResume";
|
|
var ToastViewport = React3.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeToast,
|
|
hotkey = VIEWPORT_DEFAULT_HOTKEY,
|
|
label = "Notifications ({hotkey})",
|
|
...viewportProps
|
|
} = props;
|
|
const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
|
|
const getItems = useCollection(__scopeToast);
|
|
const wrapperRef = React3.useRef(null);
|
|
const headFocusProxyRef = React3.useRef(null);
|
|
const tailFocusProxyRef = React3.useRef(null);
|
|
const ref = React3.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
|
|
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
|
|
const hasToasts = context.toastCount > 0;
|
|
React3.useEffect(() => {
|
|
const handleKeyDown = (event) => {
|
|
var _a;
|
|
const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
|
|
if (isHotkeyPressed) (_a = ref.current) == null ? void 0 : _a.focus();
|
|
};
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, [hotkey]);
|
|
React3.useEffect(() => {
|
|
const wrapper = wrapperRef.current;
|
|
const viewport = ref.current;
|
|
if (hasToasts && wrapper && viewport) {
|
|
const handlePause = () => {
|
|
if (!context.isClosePausedRef.current) {
|
|
const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
|
|
viewport.dispatchEvent(pauseEvent);
|
|
context.isClosePausedRef.current = true;
|
|
}
|
|
};
|
|
const handleResume = () => {
|
|
if (context.isClosePausedRef.current) {
|
|
const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
|
|
viewport.dispatchEvent(resumeEvent);
|
|
context.isClosePausedRef.current = false;
|
|
}
|
|
};
|
|
const handleFocusOutResume = (event) => {
|
|
const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
|
|
if (isFocusMovingOutside) handleResume();
|
|
};
|
|
const handlePointerLeaveResume = () => {
|
|
const isFocusInside = wrapper.contains(document.activeElement);
|
|
if (!isFocusInside) handleResume();
|
|
};
|
|
wrapper.addEventListener("focusin", handlePause);
|
|
wrapper.addEventListener("focusout", handleFocusOutResume);
|
|
wrapper.addEventListener("pointermove", handlePause);
|
|
wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
|
|
window.addEventListener("blur", handlePause);
|
|
window.addEventListener("focus", handleResume);
|
|
return () => {
|
|
wrapper.removeEventListener("focusin", handlePause);
|
|
wrapper.removeEventListener("focusout", handleFocusOutResume);
|
|
wrapper.removeEventListener("pointermove", handlePause);
|
|
wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
|
|
window.removeEventListener("blur", handlePause);
|
|
window.removeEventListener("focus", handleResume);
|
|
};
|
|
}
|
|
}, [hasToasts, context.isClosePausedRef]);
|
|
const getSortedTabbableCandidates = React3.useCallback(
|
|
({ tabbingDirection }) => {
|
|
const toastItems = getItems();
|
|
const tabbableCandidates = toastItems.map((toastItem) => {
|
|
const toastNode = toastItem.ref.current;
|
|
const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
|
|
return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
|
|
});
|
|
return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
|
|
},
|
|
[getItems]
|
|
);
|
|
React3.useEffect(() => {
|
|
const viewport = ref.current;
|
|
if (viewport) {
|
|
const handleKeyDown = (event) => {
|
|
var _a, _b, _c;
|
|
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
const isTabKey = event.key === "Tab" && !isMetaKey;
|
|
if (isTabKey) {
|
|
const focusedElement = document.activeElement;
|
|
const isTabbingBackwards = event.shiftKey;
|
|
const targetIsViewport = event.target === viewport;
|
|
if (targetIsViewport && isTabbingBackwards) {
|
|
(_a = headFocusProxyRef.current) == null ? void 0 : _a.focus();
|
|
return;
|
|
}
|
|
const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
|
|
const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });
|
|
const index = sortedCandidates.findIndex((candidate) => candidate === focusedElement);
|
|
if (focusFirst(sortedCandidates.slice(index + 1))) {
|
|
event.preventDefault();
|
|
} else {
|
|
isTabbingBackwards ? (_b = headFocusProxyRef.current) == null ? void 0 : _b.focus() : (_c = tailFocusProxyRef.current) == null ? void 0 : _c.focus();
|
|
}
|
|
}
|
|
};
|
|
viewport.addEventListener("keydown", handleKeyDown);
|
|
return () => viewport.removeEventListener("keydown", handleKeyDown);
|
|
}
|
|
}, [getItems, getSortedTabbableCandidates]);
|
|
return (0, import_jsx_runtime3.jsxs)(
|
|
Branch,
|
|
{
|
|
ref: wrapperRef,
|
|
role: "region",
|
|
"aria-label": label.replace("{hotkey}", hotkeyLabel),
|
|
tabIndex: -1,
|
|
style: { pointerEvents: hasToasts ? void 0 : "none" },
|
|
children: [
|
|
hasToasts && (0, import_jsx_runtime3.jsx)(
|
|
FocusProxy,
|
|
{
|
|
ref: headFocusProxyRef,
|
|
onFocusFromOutsideViewport: () => {
|
|
const tabbableCandidates = getSortedTabbableCandidates({
|
|
tabbingDirection: "forwards"
|
|
});
|
|
focusFirst(tabbableCandidates);
|
|
}
|
|
}
|
|
),
|
|
(0, import_jsx_runtime3.jsx)(Collection.Slot, { scope: __scopeToast, children: (0, import_jsx_runtime3.jsx)(Primitive.ol, { tabIndex: -1, ...viewportProps, ref: composedRefs }) }),
|
|
hasToasts && (0, import_jsx_runtime3.jsx)(
|
|
FocusProxy,
|
|
{
|
|
ref: tailFocusProxyRef,
|
|
onFocusFromOutsideViewport: () => {
|
|
const tabbableCandidates = getSortedTabbableCandidates({
|
|
tabbingDirection: "backwards"
|
|
});
|
|
focusFirst(tabbableCandidates);
|
|
}
|
|
}
|
|
)
|
|
]
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ToastViewport.displayName = VIEWPORT_NAME;
|
|
var FOCUS_PROXY_NAME = "ToastFocusProxy";
|
|
var FocusProxy = React3.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
|
|
const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
|
|
return (0, import_jsx_runtime3.jsx)(
|
|
VisuallyHidden,
|
|
{
|
|
"aria-hidden": true,
|
|
tabIndex: 0,
|
|
...proxyProps,
|
|
ref: forwardedRef,
|
|
style: { position: "fixed" },
|
|
onFocus: (event) => {
|
|
var _a;
|
|
const prevFocusedElement = event.relatedTarget;
|
|
const isFocusFromOutsideViewport = !((_a = context.viewport) == null ? void 0 : _a.contains(prevFocusedElement));
|
|
if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
FocusProxy.displayName = FOCUS_PROXY_NAME;
|
|
var TOAST_NAME = "Toast";
|
|
var TOAST_SWIPE_START = "toast.swipeStart";
|
|
var TOAST_SWIPE_MOVE = "toast.swipeMove";
|
|
var TOAST_SWIPE_CANCEL = "toast.swipeCancel";
|
|
var TOAST_SWIPE_END = "toast.swipeEnd";
|
|
var Toast = React3.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
|
|
const [open = true, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen,
|
|
onChange: onOpenChange
|
|
});
|
|
return (0, import_jsx_runtime3.jsx)(Presence, { present: forceMount || open, children: (0, import_jsx_runtime3.jsx)(
|
|
ToastImpl,
|
|
{
|
|
open,
|
|
...toastProps,
|
|
ref: forwardedRef,
|
|
onClose: () => setOpen(false),
|
|
onPause: useCallbackRef(props.onPause),
|
|
onResume: useCallbackRef(props.onResume),
|
|
onSwipeStart: composeEventHandlers(props.onSwipeStart, (event) => {
|
|
event.currentTarget.setAttribute("data-swipe", "start");
|
|
}),
|
|
onSwipeMove: composeEventHandlers(props.onSwipeMove, (event) => {
|
|
const { x, y } = event.detail.delta;
|
|
event.currentTarget.setAttribute("data-swipe", "move");
|
|
event.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${x}px`);
|
|
event.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${y}px`);
|
|
}),
|
|
onSwipeCancel: composeEventHandlers(props.onSwipeCancel, (event) => {
|
|
event.currentTarget.setAttribute("data-swipe", "cancel");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-x");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
|
|
}),
|
|
onSwipeEnd: composeEventHandlers(props.onSwipeEnd, (event) => {
|
|
const { x, y } = event.detail.delta;
|
|
event.currentTarget.setAttribute("data-swipe", "end");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
|
|
event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
|
|
event.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${x}px`);
|
|
event.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${y}px`);
|
|
setOpen(false);
|
|
})
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
Toast.displayName = TOAST_NAME;
|
|
var [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(TOAST_NAME, {
|
|
onClose() {
|
|
}
|
|
});
|
|
var ToastImpl = React3.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeToast,
|
|
type = "foreground",
|
|
duration: durationProp,
|
|
open,
|
|
onClose,
|
|
onEscapeKeyDown,
|
|
onPause,
|
|
onResume,
|
|
onSwipeStart,
|
|
onSwipeMove,
|
|
onSwipeCancel,
|
|
onSwipeEnd,
|
|
...toastProps
|
|
} = props;
|
|
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
const [node, setNode] = React3.useState(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
|
|
const pointerStartRef = React3.useRef(null);
|
|
const swipeDeltaRef = React3.useRef(null);
|
|
const duration = durationProp || context.duration;
|
|
const closeTimerStartTimeRef = React3.useRef(0);
|
|
const closeTimerRemainingTimeRef = React3.useRef(duration);
|
|
const closeTimerRef = React3.useRef(0);
|
|
const { onToastAdd, onToastRemove } = context;
|
|
const handleClose = useCallbackRef(() => {
|
|
var _a;
|
|
const isFocusInToast = node == null ? void 0 : node.contains(document.activeElement);
|
|
if (isFocusInToast) (_a = context.viewport) == null ? void 0 : _a.focus();
|
|
onClose();
|
|
});
|
|
const startTimer = React3.useCallback(
|
|
(duration2) => {
|
|
if (!duration2 || duration2 === Infinity) return;
|
|
window.clearTimeout(closeTimerRef.current);
|
|
closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
|
|
closeTimerRef.current = window.setTimeout(handleClose, duration2);
|
|
},
|
|
[handleClose]
|
|
);
|
|
React3.useEffect(() => {
|
|
const viewport = context.viewport;
|
|
if (viewport) {
|
|
const handleResume = () => {
|
|
startTimer(closeTimerRemainingTimeRef.current);
|
|
onResume == null ? void 0 : onResume();
|
|
};
|
|
const handlePause = () => {
|
|
const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
|
|
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
|
|
window.clearTimeout(closeTimerRef.current);
|
|
onPause == null ? void 0 : onPause();
|
|
};
|
|
viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
|
|
viewport.addEventListener(VIEWPORT_RESUME, handleResume);
|
|
return () => {
|
|
viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
|
|
viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
|
|
};
|
|
}
|
|
}, [context.viewport, duration, onPause, onResume, startTimer]);
|
|
React3.useEffect(() => {
|
|
if (open && !context.isClosePausedRef.current) startTimer(duration);
|
|
}, [open, duration, context.isClosePausedRef, startTimer]);
|
|
React3.useEffect(() => {
|
|
onToastAdd();
|
|
return () => onToastRemove();
|
|
}, [onToastAdd, onToastRemove]);
|
|
const announceTextContent = React3.useMemo(() => {
|
|
return node ? getAnnounceTextContent(node) : null;
|
|
}, [node]);
|
|
if (!context.viewport) return null;
|
|
return (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
announceTextContent && (0, import_jsx_runtime3.jsx)(
|
|
ToastAnnounce,
|
|
{
|
|
__scopeToast,
|
|
role: "status",
|
|
"aria-live": type === "foreground" ? "assertive" : "polite",
|
|
"aria-atomic": true,
|
|
children: announceTextContent
|
|
}
|
|
),
|
|
(0, import_jsx_runtime3.jsx)(ToastInteractiveProvider, { scope: __scopeToast, onClose: handleClose, children: ReactDOM2.createPortal(
|
|
(0, import_jsx_runtime3.jsx)(Collection.ItemSlot, { scope: __scopeToast, children: (0, import_jsx_runtime3.jsx)(
|
|
Root,
|
|
{
|
|
asChild: true,
|
|
onEscapeKeyDown: composeEventHandlers(onEscapeKeyDown, () => {
|
|
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
|
|
context.isFocusedToastEscapeKeyDownRef.current = false;
|
|
}),
|
|
children: (0, import_jsx_runtime3.jsx)(
|
|
Primitive.li,
|
|
{
|
|
role: "status",
|
|
"aria-live": "off",
|
|
"aria-atomic": true,
|
|
tabIndex: 0,
|
|
"data-state": open ? "open" : "closed",
|
|
"data-swipe-direction": context.swipeDirection,
|
|
...toastProps,
|
|
ref: composedRefs,
|
|
style: { userSelect: "none", touchAction: "none", ...props.style },
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (event.key !== "Escape") return;
|
|
onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event.nativeEvent);
|
|
if (!event.nativeEvent.defaultPrevented) {
|
|
context.isFocusedToastEscapeKeyDownRef.current = true;
|
|
handleClose();
|
|
}
|
|
}),
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
|
|
if (event.button !== 0) return;
|
|
pointerStartRef.current = { x: event.clientX, y: event.clientY };
|
|
}),
|
|
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
|
|
if (!pointerStartRef.current) return;
|
|
const x = event.clientX - pointerStartRef.current.x;
|
|
const y = event.clientY - pointerStartRef.current.y;
|
|
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
|
|
const isHorizontalSwipe = ["left", "right"].includes(context.swipeDirection);
|
|
const clamp = ["left", "up"].includes(context.swipeDirection) ? Math.min : Math.max;
|
|
const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
|
|
const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
|
|
const moveStartBuffer = event.pointerType === "touch" ? 10 : 2;
|
|
const delta = { x: clampedX, y: clampedY };
|
|
const eventDetail = { originalEvent: event, delta };
|
|
if (hasSwipeMoveStarted) {
|
|
swipeDeltaRef.current = delta;
|
|
handleAndDispatchCustomEvent2(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
|
|
discrete: false
|
|
});
|
|
} else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
|
|
swipeDeltaRef.current = delta;
|
|
handleAndDispatchCustomEvent2(TOAST_SWIPE_START, onSwipeStart, eventDetail, {
|
|
discrete: false
|
|
});
|
|
event.target.setPointerCapture(event.pointerId);
|
|
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
|
|
pointerStartRef.current = null;
|
|
}
|
|
}),
|
|
onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
|
|
const delta = swipeDeltaRef.current;
|
|
const target = event.target;
|
|
if (target.hasPointerCapture(event.pointerId)) {
|
|
target.releasePointerCapture(event.pointerId);
|
|
}
|
|
swipeDeltaRef.current = null;
|
|
pointerStartRef.current = null;
|
|
if (delta) {
|
|
const toast = event.currentTarget;
|
|
const eventDetail = { originalEvent: event, delta };
|
|
if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
|
|
handleAndDispatchCustomEvent2(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
|
|
discrete: true
|
|
});
|
|
} else {
|
|
handleAndDispatchCustomEvent2(
|
|
TOAST_SWIPE_CANCEL,
|
|
onSwipeCancel,
|
|
eventDetail,
|
|
{
|
|
discrete: true
|
|
}
|
|
);
|
|
}
|
|
toast.addEventListener("click", (event2) => event2.preventDefault(), {
|
|
once: true
|
|
});
|
|
}
|
|
})
|
|
}
|
|
)
|
|
}
|
|
) }),
|
|
context.viewport
|
|
) })
|
|
] });
|
|
}
|
|
);
|
|
var ToastAnnounce = (props) => {
|
|
const { __scopeToast, children, ...announceProps } = props;
|
|
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
const [renderAnnounceText, setRenderAnnounceText] = React3.useState(false);
|
|
const [isAnnounced, setIsAnnounced] = React3.useState(false);
|
|
useNextFrame(() => setRenderAnnounceText(true));
|
|
React3.useEffect(() => {
|
|
const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
|
|
return () => window.clearTimeout(timer);
|
|
}, []);
|
|
return isAnnounced ? null : (0, import_jsx_runtime3.jsx)(Portal, { asChild: true, children: (0, import_jsx_runtime3.jsx)(VisuallyHidden, { ...announceProps, children: renderAnnounceText && (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
context.label,
|
|
" ",
|
|
children
|
|
] }) }) });
|
|
};
|
|
var TITLE_NAME = "ToastTitle";
|
|
var ToastTitle = React3.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToast, ...titleProps } = props;
|
|
return (0, import_jsx_runtime3.jsx)(Primitive.div, { ...titleProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ToastTitle.displayName = TITLE_NAME;
|
|
var DESCRIPTION_NAME = "ToastDescription";
|
|
var ToastDescription = React3.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToast, ...descriptionProps } = props;
|
|
return (0, import_jsx_runtime3.jsx)(Primitive.div, { ...descriptionProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ToastDescription.displayName = DESCRIPTION_NAME;
|
|
var ACTION_NAME = "ToastAction";
|
|
var ToastAction = React3.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { altText, ...actionProps } = props;
|
|
if (!altText.trim()) {
|
|
console.error(
|
|
`Invalid prop \`altText\` supplied to \`${ACTION_NAME}\`. Expected non-empty \`string\`.`
|
|
);
|
|
return null;
|
|
}
|
|
return (0, import_jsx_runtime3.jsx)(ToastAnnounceExclude, { altText, asChild: true, children: (0, import_jsx_runtime3.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
ToastAction.displayName = ACTION_NAME;
|
|
var CLOSE_NAME = "ToastClose";
|
|
var ToastClose = React3.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToast, ...closeProps } = props;
|
|
const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
|
|
return (0, import_jsx_runtime3.jsx)(ToastAnnounceExclude, { asChild: true, children: (0, import_jsx_runtime3.jsx)(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
...closeProps,
|
|
ref: forwardedRef,
|
|
onClick: composeEventHandlers(props.onClick, interactiveContext.onClose)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
ToastClose.displayName = CLOSE_NAME;
|
|
var ToastAnnounceExclude = React3.forwardRef((props, forwardedRef) => {
|
|
const { __scopeToast, altText, ...announceExcludeProps } = props;
|
|
return (0, import_jsx_runtime3.jsx)(
|
|
Primitive.div,
|
|
{
|
|
"data-radix-toast-announce-exclude": "",
|
|
"data-radix-toast-announce-alt": altText || void 0,
|
|
...announceExcludeProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
});
|
|
function getAnnounceTextContent(container) {
|
|
const textContent = [];
|
|
const childNodes = Array.from(container.childNodes);
|
|
childNodes.forEach((node) => {
|
|
if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);
|
|
if (isHTMLElement(node)) {
|
|
const isHidden = node.ariaHidden || node.hidden || node.style.display === "none";
|
|
const isExcluded = node.dataset.radixToastAnnounceExclude === "";
|
|
if (!isHidden) {
|
|
if (isExcluded) {
|
|
const altText = node.dataset.radixToastAnnounceAlt;
|
|
if (altText) textContent.push(altText);
|
|
} else {
|
|
textContent.push(...getAnnounceTextContent(node));
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return textContent;
|
|
}
|
|
function handleAndDispatchCustomEvent2(name, handler, detail, { discrete }) {
|
|
const currentTarget = detail.originalEvent.currentTarget;
|
|
const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });
|
|
if (handler) currentTarget.addEventListener(name, handler, { once: true });
|
|
if (discrete) {
|
|
dispatchDiscreteCustomEvent(currentTarget, event);
|
|
} else {
|
|
currentTarget.dispatchEvent(event);
|
|
}
|
|
}
|
|
var isDeltaInDirection = (delta, direction, threshold = 0) => {
|
|
const deltaX = Math.abs(delta.x);
|
|
const deltaY = Math.abs(delta.y);
|
|
const isDeltaX = deltaX > deltaY;
|
|
if (direction === "left" || direction === "right") {
|
|
return isDeltaX && deltaX > threshold;
|
|
} else {
|
|
return !isDeltaX && deltaY > threshold;
|
|
}
|
|
};
|
|
function useNextFrame(callback = () => {
|
|
}) {
|
|
const fn = useCallbackRef(callback);
|
|
useLayoutEffect2(() => {
|
|
let raf1 = 0;
|
|
let raf2 = 0;
|
|
raf1 = window.requestAnimationFrame(() => raf2 = window.requestAnimationFrame(fn));
|
|
return () => {
|
|
window.cancelAnimationFrame(raf1);
|
|
window.cancelAnimationFrame(raf2);
|
|
};
|
|
}, [fn]);
|
|
}
|
|
function isHTMLElement(node) {
|
|
return node.nodeType === node.ELEMENT_NODE;
|
|
}
|
|
function getTabbableCandidates(container) {
|
|
const nodes = [];
|
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
acceptNode: (node) => {
|
|
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
}
|
|
});
|
|
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
return nodes;
|
|
}
|
|
function focusFirst(candidates) {
|
|
const previouslyFocusedElement = document.activeElement;
|
|
return candidates.some((candidate) => {
|
|
if (candidate === previouslyFocusedElement) return true;
|
|
candidate.focus();
|
|
return document.activeElement !== previouslyFocusedElement;
|
|
});
|
|
}
|
|
var Provider = ToastProvider;
|
|
var Viewport = ToastViewport;
|
|
var Root2 = Toast;
|
|
var Title = ToastTitle;
|
|
var Description = ToastDescription;
|
|
var Action = ToastAction;
|
|
var Close = ToastClose;
|
|
export {
|
|
Action,
|
|
Close,
|
|
Description,
|
|
Provider,
|
|
Root2 as Root,
|
|
Title,
|
|
Toast,
|
|
ToastAction,
|
|
ToastClose,
|
|
ToastDescription,
|
|
ToastProvider,
|
|
ToastTitle,
|
|
ToastViewport,
|
|
Viewport,
|
|
createToastScope
|
|
};
|
|
//# sourceMappingURL=@radix-ui_react-toast.js.map
|