v1.0 with SW PWA enabled

This commit is contained in:
Blomios
2026-01-01 17:40:53 +01:00
parent 1c0e22aac1
commit 3c8bebb2ad
29775 changed files with 2197201 additions and 119080 deletions

21
frontend/node_modules/@radix-ui/react-toast/LICENSE generated vendored Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -0,0 +1,3 @@
# `react-toast`
View docs [here](https://radix-ui.com/primitives/docs/components/toast).

View File

@ -0,0 +1,120 @@
import * as _radix_ui_react_context from '@radix-ui/react-context';
import * as React from 'react';
import * as DismissableLayer from '@radix-ui/react-dismissable-layer';
import { Primitive } from '@radix-ui/react-primitive';
type SwipeDirection = 'up' | 'down' | 'left' | 'right';
declare const createToastScope: _radix_ui_react_context.CreateScope;
interface ToastProviderProps {
children?: React.ReactNode;
/**
* An author-localized label for each toast. Used to help screen reader users
* associate the interruption with a toast.
* @defaultValue 'Notification'
*/
label?: string;
/**
* Time in milliseconds that each toast should remain visible for.
* @defaultValue 5000
*/
duration?: number;
/**
* Direction of pointer swipe that should close the toast.
* @defaultValue 'right'
*/
swipeDirection?: SwipeDirection;
/**
* Distance in pixels that the swipe must pass before a close is triggered.
* @defaultValue 50
*/
swipeThreshold?: number;
}
declare const ToastProvider: React.FC<ToastProviderProps>;
type PrimitiveOrderedListProps = React.ComponentPropsWithoutRef<typeof Primitive.ol>;
interface ToastViewportProps extends PrimitiveOrderedListProps {
/**
* The keys to use as the keyboard shortcut that will move focus to the toast viewport.
* @defaultValue ['F8']
*/
hotkey?: string[];
/**
* An author-localized label for the toast viewport to provide context for screen reader users
* when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.
* @defaultValue 'Notifications ({hotkey})'
*/
label?: string;
}
declare const ToastViewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
type ToastElement = ToastImplElement;
interface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {
open?: boolean;
defaultOpen?: boolean;
onOpenChange?(open: boolean): void;
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
type SwipeEvent = {
currentTarget: EventTarget & ToastElement;
} & Omit<CustomEvent<{
originalEvent: React.PointerEvent;
delta: {
x: number;
y: number;
};
}>, 'currentTarget'>;
type ToastImplElement = React.ComponentRef<typeof Primitive.li>;
type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer.Root>;
type ToastImplPrivateProps = {
open: boolean;
onClose(): void;
};
type PrimitiveListItemProps = React.ComponentPropsWithoutRef<typeof Primitive.li>;
interface ToastImplProps extends ToastImplPrivateProps, PrimitiveListItemProps {
type?: 'foreground' | 'background';
/**
* Time in milliseconds that toast should remain visible for. Overrides value
* given to `ToastProvider`.
*/
duration?: number;
onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];
onPause?(): void;
onResume?(): void;
onSwipeStart?(event: SwipeEvent): void;
onSwipeMove?(event: SwipeEvent): void;
onSwipeCancel?(event: SwipeEvent): void;
onSwipeEnd?(event: SwipeEvent): void;
}
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
interface ToastTitleProps extends PrimitiveDivProps {
}
declare const ToastTitle: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
interface ToastDescriptionProps extends PrimitiveDivProps {
}
declare const ToastDescription: React.ForwardRefExoticComponent<ToastDescriptionProps & React.RefAttributes<HTMLDivElement>>;
interface ToastActionProps extends ToastCloseProps {
/**
* A short description for an alternate way to carry out the action. For screen reader users
* who will not be able to navigate to the button easily/quickly.
* @example <ToastAction altText="Goto account settings to upgrade">Upgrade</ToastAction>
* @example <ToastAction altText="Undo (Alt+U)">Undo</ToastAction>
*/
altText: string;
}
declare const ToastAction: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
interface ToastCloseProps extends PrimitiveButtonProps {
}
declare const ToastClose: React.ForwardRefExoticComponent<ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
declare const Provider: React.FC<ToastProviderProps>;
declare const Viewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
declare const Root: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
declare const Title: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
declare const Description: React.ForwardRefExoticComponent<ToastDescriptionProps & React.RefAttributes<HTMLDivElement>>;
declare const Action: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
declare const Close: React.ForwardRefExoticComponent<ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
export { Action, Close, Description, Provider, Root, Title, Toast, ToastAction, type ToastActionProps, ToastClose, type ToastCloseProps, ToastDescription, type ToastDescriptionProps, type ToastProps, ToastProvider, type ToastProviderProps, ToastTitle, type ToastTitleProps, ToastViewport, type ToastViewportProps, Viewport, createToastScope };

View File

@ -0,0 +1,120 @@
import * as _radix_ui_react_context from '@radix-ui/react-context';
import * as React from 'react';
import * as DismissableLayer from '@radix-ui/react-dismissable-layer';
import { Primitive } from '@radix-ui/react-primitive';
type SwipeDirection = 'up' | 'down' | 'left' | 'right';
declare const createToastScope: _radix_ui_react_context.CreateScope;
interface ToastProviderProps {
children?: React.ReactNode;
/**
* An author-localized label for each toast. Used to help screen reader users
* associate the interruption with a toast.
* @defaultValue 'Notification'
*/
label?: string;
/**
* Time in milliseconds that each toast should remain visible for.
* @defaultValue 5000
*/
duration?: number;
/**
* Direction of pointer swipe that should close the toast.
* @defaultValue 'right'
*/
swipeDirection?: SwipeDirection;
/**
* Distance in pixels that the swipe must pass before a close is triggered.
* @defaultValue 50
*/
swipeThreshold?: number;
}
declare const ToastProvider: React.FC<ToastProviderProps>;
type PrimitiveOrderedListProps = React.ComponentPropsWithoutRef<typeof Primitive.ol>;
interface ToastViewportProps extends PrimitiveOrderedListProps {
/**
* The keys to use as the keyboard shortcut that will move focus to the toast viewport.
* @defaultValue ['F8']
*/
hotkey?: string[];
/**
* An author-localized label for the toast viewport to provide context for screen reader users
* when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.
* @defaultValue 'Notifications ({hotkey})'
*/
label?: string;
}
declare const ToastViewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
type ToastElement = ToastImplElement;
interface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {
open?: boolean;
defaultOpen?: boolean;
onOpenChange?(open: boolean): void;
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
type SwipeEvent = {
currentTarget: EventTarget & ToastElement;
} & Omit<CustomEvent<{
originalEvent: React.PointerEvent;
delta: {
x: number;
y: number;
};
}>, 'currentTarget'>;
type ToastImplElement = React.ComponentRef<typeof Primitive.li>;
type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer.Root>;
type ToastImplPrivateProps = {
open: boolean;
onClose(): void;
};
type PrimitiveListItemProps = React.ComponentPropsWithoutRef<typeof Primitive.li>;
interface ToastImplProps extends ToastImplPrivateProps, PrimitiveListItemProps {
type?: 'foreground' | 'background';
/**
* Time in milliseconds that toast should remain visible for. Overrides value
* given to `ToastProvider`.
*/
duration?: number;
onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];
onPause?(): void;
onResume?(): void;
onSwipeStart?(event: SwipeEvent): void;
onSwipeMove?(event: SwipeEvent): void;
onSwipeCancel?(event: SwipeEvent): void;
onSwipeEnd?(event: SwipeEvent): void;
}
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
interface ToastTitleProps extends PrimitiveDivProps {
}
declare const ToastTitle: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
interface ToastDescriptionProps extends PrimitiveDivProps {
}
declare const ToastDescription: React.ForwardRefExoticComponent<ToastDescriptionProps & React.RefAttributes<HTMLDivElement>>;
interface ToastActionProps extends ToastCloseProps {
/**
* A short description for an alternate way to carry out the action. For screen reader users
* who will not be able to navigate to the button easily/quickly.
* @example <ToastAction altText="Goto account settings to upgrade">Upgrade</ToastAction>
* @example <ToastAction altText="Undo (Alt+U)">Undo</ToastAction>
*/
altText: string;
}
declare const ToastAction: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
interface ToastCloseProps extends PrimitiveButtonProps {
}
declare const ToastClose: React.ForwardRefExoticComponent<ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
declare const Provider: React.FC<ToastProviderProps>;
declare const Viewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
declare const Root: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
declare const Title: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
declare const Description: React.ForwardRefExoticComponent<ToastDescriptionProps & React.RefAttributes<HTMLDivElement>>;
declare const Action: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
declare const Close: React.ForwardRefExoticComponent<ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
export { Action, Close, Description, Provider, Root, Title, Toast, ToastAction, type ToastActionProps, ToastClose, type ToastCloseProps, ToastDescription, type ToastDescriptionProps, type ToastProps, ToastProvider, type ToastProviderProps, ToastTitle, type ToastTitleProps, ToastViewport, type ToastViewportProps, Viewport, createToastScope };

View File

@ -0,0 +1,677 @@
"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
Action: () => Action,
Close: () => Close,
Description: () => Description,
Provider: () => Provider,
Root: () => Root2,
Title: () => Title,
Toast: () => Toast,
ToastAction: () => ToastAction,
ToastClose: () => ToastClose,
ToastDescription: () => ToastDescription,
ToastProvider: () => ToastProvider,
ToastTitle: () => ToastTitle,
ToastViewport: () => ToastViewport,
Viewport: () => Viewport,
createToastScope: () => createToastScope
});
module.exports = __toCommonJS(index_exports);
// src/toast.tsx
var React = __toESM(require("react"));
var ReactDOM = __toESM(require("react-dom"));
var import_primitive = require("@radix-ui/primitive");
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
var import_react_collection = require("@radix-ui/react-collection");
var import_react_context = require("@radix-ui/react-context");
var DismissableLayer = __toESM(require("@radix-ui/react-dismissable-layer"));
var import_react_portal = require("@radix-ui/react-portal");
var import_react_presence = require("@radix-ui/react-presence");
var import_react_primitive = require("@radix-ui/react-primitive");
var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
var import_react_use_layout_effect = require("@radix-ui/react-use-layout-effect");
var import_react_visually_hidden = require("@radix-ui/react-visually-hidden");
var import_jsx_runtime = require("react/jsx-runtime");
var PROVIDER_NAME = "ToastProvider";
var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)("Toast");
var [createToastContext, createToastScope] = (0, import_react_context.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] = React.useState(null);
const [toastCount, setToastCount] = React.useState(0);
const isFocusedToastEscapeKeyDownRef = React.useRef(false);
const isClosePausedRef = React.useRef(false);
if (!label.trim()) {
console.error(
`Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`
);
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ToastProviderProvider,
{
scope: __scopeToast,
label,
duration,
swipeDirection,
swipeThreshold,
toastCount,
viewport,
onViewportChange: setViewport,
onToastAdd: React.useCallback(() => setToastCount((prevCount) => prevCount + 1), []),
onToastRemove: React.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 = React.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 = React.useRef(null);
const headFocusProxyRef = React.useRef(null);
const tailFocusProxyRef = React.useRef(null);
const ref = React.useRef(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref, context.onViewportChange);
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
const hasToasts = context.toastCount > 0;
React.useEffect(() => {
const handleKeyDown = (event) => {
const isHotkeyPressed = hotkey.length !== 0 && hotkey.every((key) => event[key] || event.code === key);
if (isHotkeyPressed) ref.current?.focus();
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [hotkey]);
React.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 = React.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]
);
React.useEffect(() => {
const viewport = ref.current;
if (viewport) {
const handleKeyDown = (event) => {
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) {
headFocusProxyRef.current?.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 ? headFocusProxyRef.current?.focus() : tailFocusProxyRef.current?.focus();
}
}
};
viewport.addEventListener("keydown", handleKeyDown);
return () => viewport.removeEventListener("keydown", handleKeyDown);
}
}, [getItems, getSortedTabbableCandidates]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
DismissableLayer.Branch,
{
ref: wrapperRef,
role: "region",
"aria-label": label.replace("{hotkey}", hotkeyLabel),
tabIndex: -1,
style: { pointerEvents: hasToasts ? void 0 : "none" },
children: [
hasToasts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
FocusProxy,
{
ref: headFocusProxyRef,
onFocusFromOutsideViewport: () => {
const tabbableCandidates = getSortedTabbableCandidates({
tabbingDirection: "forwards"
});
focusFirst(tabbableCandidates);
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.ol, { tabIndex: -1, ...viewportProps, ref: composedRefs }) }),
hasToasts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
FocusProxy,
{
ref: tailFocusProxyRef,
onFocusFromOutsideViewport: () => {
const tabbableCandidates = getSortedTabbableCandidates({
tabbingDirection: "backwards"
});
focusFirst(tabbableCandidates);
}
}
)
]
}
);
}
);
ToastViewport.displayName = VIEWPORT_NAME;
var FOCUS_PROXY_NAME = "ToastFocusProxy";
var FocusProxy = React.forwardRef(
(props, forwardedRef) => {
const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_visually_hidden.VisuallyHidden,
{
tabIndex: 0,
...proxyProps,
ref: forwardedRef,
style: { position: "fixed" },
onFocus: (event) => {
const prevFocusedElement = event.relatedTarget;
const isFocusFromOutsideViewport = !context.viewport?.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 = React.forwardRef(
(props, forwardedRef) => {
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
const [open, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
prop: openProp,
defaultProp: defaultOpen ?? true,
onChange: onOpenChange,
caller: TOAST_NAME
});
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ToastImpl,
{
open,
...toastProps,
ref: forwardedRef,
onClose: () => setOpen(false),
onPause: (0, import_react_use_callback_ref.useCallbackRef)(props.onPause),
onResume: (0, import_react_use_callback_ref.useCallbackRef)(props.onResume),
onSwipeStart: (0, import_primitive.composeEventHandlers)(props.onSwipeStart, (event) => {
event.currentTarget.setAttribute("data-swipe", "start");
}),
onSwipeMove: (0, import_primitive.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: (0, import_primitive.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: (0, import_primitive.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 = React.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] = React.useState(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node2) => setNode(node2));
const pointerStartRef = React.useRef(null);
const swipeDeltaRef = React.useRef(null);
const duration = durationProp || context.duration;
const closeTimerStartTimeRef = React.useRef(0);
const closeTimerRemainingTimeRef = React.useRef(duration);
const closeTimerRef = React.useRef(0);
const { onToastAdd, onToastRemove } = context;
const handleClose = (0, import_react_use_callback_ref.useCallbackRef)(() => {
const isFocusInToast = node?.contains(document.activeElement);
if (isFocusInToast) context.viewport?.focus();
onClose();
});
const startTimer = React.useCallback(
(duration2) => {
if (!duration2 || duration2 === Infinity) return;
window.clearTimeout(closeTimerRef.current);
closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
closeTimerRef.current = window.setTimeout(handleClose, duration2);
},
[handleClose]
);
React.useEffect(() => {
const viewport = context.viewport;
if (viewport) {
const handleResume = () => {
startTimer(closeTimerRemainingTimeRef.current);
onResume?.();
};
const handlePause = () => {
const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
window.clearTimeout(closeTimerRef.current);
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]);
React.useEffect(() => {
if (open && !context.isClosePausedRef.current) startTimer(duration);
}, [open, duration, context.isClosePausedRef, startTimer]);
React.useEffect(() => {
onToastAdd();
return () => onToastRemove();
}, [onToastAdd, onToastRemove]);
const announceTextContent = React.useMemo(() => {
return node ? getAnnounceTextContent(node) : null;
}, [node]);
if (!context.viewport) return null;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
announceTextContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ToastAnnounce,
{
__scopeToast,
role: "status",
"aria-live": type === "foreground" ? "assertive" : "polite",
children: announceTextContent
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastInteractiveProvider, { scope: __scopeToast, onClose: handleClose, children: ReactDOM.createPortal(
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DismissableLayer.Root,
{
asChild: true,
onEscapeKeyDown: (0, import_primitive.composeEventHandlers)(onEscapeKeyDown, () => {
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
context.isFocusedToastEscapeKeyDownRef.current = false;
}),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.li,
{
tabIndex: 0,
"data-state": open ? "open" : "closed",
"data-swipe-direction": context.swipeDirection,
...toastProps,
ref: composedRefs,
style: { userSelect: "none", touchAction: "none", ...props.style },
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
if (event.key !== "Escape") return;
onEscapeKeyDown?.(event.nativeEvent);
if (!event.nativeEvent.defaultPrevented) {
context.isFocusedToastEscapeKeyDownRef.current = true;
handleClose();
}
}),
onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
if (event.button !== 0) return;
pointerStartRef.current = { x: event.clientX, y: event.clientY };
}),
onPointerMove: (0, import_primitive.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;
handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
discrete: false
});
} else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
swipeDeltaRef.current = delta;
handleAndDispatchCustomEvent(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: (0, import_primitive.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)) {
handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
discrete: true
});
} else {
handleAndDispatchCustomEvent(
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] = React.useState(false);
const [isAnnounced, setIsAnnounced] = React.useState(false);
useNextFrame(() => setRenderAnnounceText(true));
React.useEffect(() => {
const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
return () => window.clearTimeout(timer);
}, []);
return isAnnounced ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_visually_hidden.VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
context.label,
" ",
children
] }) }) });
};
var TITLE_NAME = "ToastTitle";
var ToastTitle = React.forwardRef(
(props, forwardedRef) => {
const { __scopeToast, ...titleProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...titleProps, ref: forwardedRef });
}
);
ToastTitle.displayName = TITLE_NAME;
var DESCRIPTION_NAME = "ToastDescription";
var ToastDescription = React.forwardRef(
(props, forwardedRef) => {
const { __scopeToast, ...descriptionProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...descriptionProps, ref: forwardedRef });
}
);
ToastDescription.displayName = DESCRIPTION_NAME;
var ACTION_NAME = "ToastAction";
var ToastAction = React.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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastAnnounceExclude, { altText, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) });
}
);
ToastAction.displayName = ACTION_NAME;
var CLOSE_NAME = "ToastClose";
var ToastClose = React.forwardRef(
(props, forwardedRef) => {
const { __scopeToast, ...closeProps } = props;
const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastAnnounceExclude, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.button,
{
type: "button",
...closeProps,
ref: forwardedRef,
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, interactiveContext.onClose)
}
) });
}
);
ToastClose.displayName = CLOSE_NAME;
var ToastAnnounceExclude = React.forwardRef((props, forwardedRef) => {
const { __scopeToast, altText, ...announceExcludeProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.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 handleAndDispatchCustomEvent(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) {
(0, import_react_primitive.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 = (0, import_react_use_callback_ref.useCallbackRef)(callback);
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
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;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,645 @@
"use client";
// src/toast.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { composeEventHandlers } from "@radix-ui/primitive";
import { useComposedRefs } from "@radix-ui/react-compose-refs";
import { createCollection } from "@radix-ui/react-collection";
import { createContextScope } from "@radix-ui/react-context";
import * as DismissableLayer from "@radix-ui/react-dismissable-layer";
import { Portal } from "@radix-ui/react-portal";
import { Presence } from "@radix-ui/react-presence";
import { Primitive, dispatchDiscreteCustomEvent } from "@radix-ui/react-primitive";
import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
import { useControllableState } from "@radix-ui/react-use-controllable-state";
import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
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] = React.useState(null);
const [toastCount, setToastCount] = React.useState(0);
const isFocusedToastEscapeKeyDownRef = React.useRef(false);
const isClosePausedRef = React.useRef(false);
if (!label.trim()) {
console.error(
`Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`
);
}
return /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ jsx(
ToastProviderProvider,
{
scope: __scopeToast,
label,
duration,
swipeDirection,
swipeThreshold,
toastCount,
viewport,
onViewportChange: setViewport,
onToastAdd: React.useCallback(() => setToastCount((prevCount) => prevCount + 1), []),
onToastRemove: React.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 = React.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 = React.useRef(null);
const headFocusProxyRef = React.useRef(null);
const tailFocusProxyRef = React.useRef(null);
const ref = React.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
const hasToasts = context.toastCount > 0;
React.useEffect(() => {
const handleKeyDown = (event) => {
const isHotkeyPressed = hotkey.length !== 0 && hotkey.every((key) => event[key] || event.code === key);
if (isHotkeyPressed) ref.current?.focus();
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [hotkey]);
React.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 = React.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]
);
React.useEffect(() => {
const viewport = ref.current;
if (viewport) {
const handleKeyDown = (event) => {
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) {
headFocusProxyRef.current?.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 ? headFocusProxyRef.current?.focus() : tailFocusProxyRef.current?.focus();
}
}
};
viewport.addEventListener("keydown", handleKeyDown);
return () => viewport.removeEventListener("keydown", handleKeyDown);
}
}, [getItems, getSortedTabbableCandidates]);
return /* @__PURE__ */ jsxs(
DismissableLayer.Branch,
{
ref: wrapperRef,
role: "region",
"aria-label": label.replace("{hotkey}", hotkeyLabel),
tabIndex: -1,
style: { pointerEvents: hasToasts ? void 0 : "none" },
children: [
hasToasts && /* @__PURE__ */ jsx(
FocusProxy,
{
ref: headFocusProxyRef,
onFocusFromOutsideViewport: () => {
const tabbableCandidates = getSortedTabbableCandidates({
tabbingDirection: "forwards"
});
focusFirst(tabbableCandidates);
}
}
),
/* @__PURE__ */ jsx(Collection.Slot, { scope: __scopeToast, children: /* @__PURE__ */ jsx(Primitive.ol, { tabIndex: -1, ...viewportProps, ref: composedRefs }) }),
hasToasts && /* @__PURE__ */ jsx(
FocusProxy,
{
ref: tailFocusProxyRef,
onFocusFromOutsideViewport: () => {
const tabbableCandidates = getSortedTabbableCandidates({
tabbingDirection: "backwards"
});
focusFirst(tabbableCandidates);
}
}
)
]
}
);
}
);
ToastViewport.displayName = VIEWPORT_NAME;
var FOCUS_PROXY_NAME = "ToastFocusProxy";
var FocusProxy = React.forwardRef(
(props, forwardedRef) => {
const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
return /* @__PURE__ */ jsx(
VisuallyHidden,
{
tabIndex: 0,
...proxyProps,
ref: forwardedRef,
style: { position: "fixed" },
onFocus: (event) => {
const prevFocusedElement = event.relatedTarget;
const isFocusFromOutsideViewport = !context.viewport?.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 = React.forwardRef(
(props, forwardedRef) => {
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
const [open, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? true,
onChange: onOpenChange,
caller: TOAST_NAME
});
return /* @__PURE__ */ jsx(Presence, { present: forceMount || open, children: /* @__PURE__ */ 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 = React.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] = React.useState(null);
const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
const pointerStartRef = React.useRef(null);
const swipeDeltaRef = React.useRef(null);
const duration = durationProp || context.duration;
const closeTimerStartTimeRef = React.useRef(0);
const closeTimerRemainingTimeRef = React.useRef(duration);
const closeTimerRef = React.useRef(0);
const { onToastAdd, onToastRemove } = context;
const handleClose = useCallbackRef(() => {
const isFocusInToast = node?.contains(document.activeElement);
if (isFocusInToast) context.viewport?.focus();
onClose();
});
const startTimer = React.useCallback(
(duration2) => {
if (!duration2 || duration2 === Infinity) return;
window.clearTimeout(closeTimerRef.current);
closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
closeTimerRef.current = window.setTimeout(handleClose, duration2);
},
[handleClose]
);
React.useEffect(() => {
const viewport = context.viewport;
if (viewport) {
const handleResume = () => {
startTimer(closeTimerRemainingTimeRef.current);
onResume?.();
};
const handlePause = () => {
const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
window.clearTimeout(closeTimerRef.current);
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]);
React.useEffect(() => {
if (open && !context.isClosePausedRef.current) startTimer(duration);
}, [open, duration, context.isClosePausedRef, startTimer]);
React.useEffect(() => {
onToastAdd();
return () => onToastRemove();
}, [onToastAdd, onToastRemove]);
const announceTextContent = React.useMemo(() => {
return node ? getAnnounceTextContent(node) : null;
}, [node]);
if (!context.viewport) return null;
return /* @__PURE__ */ jsxs(Fragment, { children: [
announceTextContent && /* @__PURE__ */ jsx(
ToastAnnounce,
{
__scopeToast,
role: "status",
"aria-live": type === "foreground" ? "assertive" : "polite",
children: announceTextContent
}
),
/* @__PURE__ */ jsx(ToastInteractiveProvider, { scope: __scopeToast, onClose: handleClose, children: ReactDOM.createPortal(
/* @__PURE__ */ jsx(Collection.ItemSlot, { scope: __scopeToast, children: /* @__PURE__ */ jsx(
DismissableLayer.Root,
{
asChild: true,
onEscapeKeyDown: composeEventHandlers(onEscapeKeyDown, () => {
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
context.isFocusedToastEscapeKeyDownRef.current = false;
}),
children: /* @__PURE__ */ jsx(
Primitive.li,
{
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?.(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;
handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
discrete: false
});
} else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
swipeDeltaRef.current = delta;
handleAndDispatchCustomEvent(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)) {
handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
discrete: true
});
} else {
handleAndDispatchCustomEvent(
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] = React.useState(false);
const [isAnnounced, setIsAnnounced] = React.useState(false);
useNextFrame(() => setRenderAnnounceText(true));
React.useEffect(() => {
const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
return () => window.clearTimeout(timer);
}, []);
return isAnnounced ? null : /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ jsxs(Fragment, { children: [
context.label,
" ",
children
] }) }) });
};
var TITLE_NAME = "ToastTitle";
var ToastTitle = React.forwardRef(
(props, forwardedRef) => {
const { __scopeToast, ...titleProps } = props;
return /* @__PURE__ */ jsx(Primitive.div, { ...titleProps, ref: forwardedRef });
}
);
ToastTitle.displayName = TITLE_NAME;
var DESCRIPTION_NAME = "ToastDescription";
var ToastDescription = React.forwardRef(
(props, forwardedRef) => {
const { __scopeToast, ...descriptionProps } = props;
return /* @__PURE__ */ jsx(Primitive.div, { ...descriptionProps, ref: forwardedRef });
}
);
ToastDescription.displayName = DESCRIPTION_NAME;
var ACTION_NAME = "ToastAction";
var ToastAction = React.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 /* @__PURE__ */ jsx(ToastAnnounceExclude, { altText, asChild: true, children: /* @__PURE__ */ jsx(ToastClose, { ...actionProps, ref: forwardedRef }) });
}
);
ToastAction.displayName = ACTION_NAME;
var CLOSE_NAME = "ToastClose";
var ToastClose = React.forwardRef(
(props, forwardedRef) => {
const { __scopeToast, ...closeProps } = props;
const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
return /* @__PURE__ */ jsx(ToastAnnounceExclude, { asChild: true, children: /* @__PURE__ */ jsx(
Primitive.button,
{
type: "button",
...closeProps,
ref: forwardedRef,
onClick: composeEventHandlers(props.onClick, interactiveContext.onClose)
}
) });
}
);
ToastClose.displayName = CLOSE_NAME;
var ToastAnnounceExclude = React.forwardRef((props, forwardedRef) => {
const { __scopeToast, altText, ...announceExcludeProps } = props;
return /* @__PURE__ */ 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 handleAndDispatchCustomEvent(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);
useLayoutEffect(() => {
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=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,79 @@
{
"name": "@radix-ui/react-toast",
"version": "1.2.15",
"license": "MIT",
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-collection": "1.1.7",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-dismissable-layer": "1.1.11",
"@radix-ui/react-portal": "1.1.9",
"@radix-ui/react-presence": "1.1.5",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-callback-ref": "1.1.1",
"@radix-ui/react-use-controllable-state": "1.2.2",
"@radix-ui/react-visually-hidden": "1.2.3",
"@radix-ui/react-use-layout-effect": "1.1.1"
},
"devDependencies": {
"@types/react": "^19.0.7",
"@types/react-dom": "^19.0.3",
"eslint": "^9.18.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"typescript": "^5.7.3",
"@repo/builder": "0.0.0",
"@repo/eslint-config": "0.0.0",
"@repo/typescript-config": "0.0.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
},
"scripts": {
"lint": "eslint --max-warnings 0 src",
"clean": "rm -rf dist",
"typecheck": "tsc --noEmit",
"build": "radix-build"
},
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
}
}