@tamagui/toast 1.74.2 → 1.74.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/Toast.native.js +130 -0
- package/dist/esm/Toast.native.js.map +6 -0
- package/dist/esm/ToastAnnounce.native.js +53 -0
- package/dist/esm/ToastAnnounce.native.js.map +6 -0
- package/dist/esm/ToastImperative.native.js +46 -0
- package/dist/esm/ToastImperative.native.js.map +6 -0
- package/dist/esm/ToastImpl.native.js +227 -0
- package/dist/esm/ToastImpl.native.js.map +6 -0
- package/dist/esm/ToastProvider.native.js +70 -0
- package/dist/esm/ToastProvider.native.js.map +6 -0
- package/dist/esm/ToastViewport.native.js +243 -0
- package/dist/esm/ToastViewport.native.js.map +6 -0
- package/dist/esm/constants.native.js +6 -0
- package/dist/esm/constants.native.js.map +6 -0
- package/dist/esm/createNativeToast.native.js +13 -0
- package/dist/esm/createNativeToast.native.js.map +6 -0
- package/dist/esm/index.native.js +2 -0
- package/dist/esm/index.native.js.map +6 -0
- package/dist/esm/types.native.js +1 -0
- package/dist/esm/types.native.js.map +6 -0
- package/package.json +13 -13
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import {
|
|
2
|
+
composeEventHandlers,
|
|
3
|
+
styled,
|
|
4
|
+
themeable,
|
|
5
|
+
useEvent,
|
|
6
|
+
withStaticProperties
|
|
7
|
+
} from "@tamagui/core";
|
|
8
|
+
import { ThemeableStack } from "@tamagui/stacks";
|
|
9
|
+
import { SizableText } from "@tamagui/text";
|
|
10
|
+
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
11
|
+
import * as React from "react";
|
|
12
|
+
import { TOAST_NAME } from "./constants";
|
|
13
|
+
import { ToastAnnounceExclude } from "./ToastAnnounce";
|
|
14
|
+
import {
|
|
15
|
+
useToast,
|
|
16
|
+
useToastController,
|
|
17
|
+
useToastState
|
|
18
|
+
} from "./ToastImperative";
|
|
19
|
+
import {
|
|
20
|
+
ToastImpl,
|
|
21
|
+
ToastImplFrame,
|
|
22
|
+
useToastInteractiveContext
|
|
23
|
+
} from "./ToastImpl";
|
|
24
|
+
import { ToastProvider } from "./ToastProvider";
|
|
25
|
+
import { ToastViewport } from "./ToastViewport";
|
|
26
|
+
import { jsx } from "react/jsx-runtime";
|
|
27
|
+
const TITLE_NAME = "ToastTitle", ToastTitle = styled(SizableText, {
|
|
28
|
+
name: TITLE_NAME,
|
|
29
|
+
variants: {
|
|
30
|
+
unstyled: {
|
|
31
|
+
false: {
|
|
32
|
+
color: "$color",
|
|
33
|
+
size: "$4"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
defaultVariants: {
|
|
38
|
+
unstyled: !1
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
ToastTitle.displayName = TITLE_NAME;
|
|
42
|
+
const DESCRIPTION_NAME = "ToastDescription", ToastDescription = styled(SizableText, {
|
|
43
|
+
name: DESCRIPTION_NAME,
|
|
44
|
+
variants: {
|
|
45
|
+
unstyled: {
|
|
46
|
+
false: {
|
|
47
|
+
color: "$color11",
|
|
48
|
+
size: "$1"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
defaultVariants: {
|
|
53
|
+
unstyled: !1
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
ToastDescription.displayName = DESCRIPTION_NAME;
|
|
57
|
+
const ACTION_NAME = "ToastAction", ToastAction = React.forwardRef(
|
|
58
|
+
(props, forwardedRef) => {
|
|
59
|
+
const { altText, ...actionProps } = props;
|
|
60
|
+
return altText ? /* @__PURE__ */ jsx(ToastAnnounceExclude, { altText, asChild: !0, children: /* @__PURE__ */ jsx(ToastClose, { ...actionProps, ref: forwardedRef }) }) : null;
|
|
61
|
+
}
|
|
62
|
+
);
|
|
63
|
+
ToastAction.propTypes = {
|
|
64
|
+
altText(props) {
|
|
65
|
+
return props.altText ? null : new Error(`Missing prop \`altText\` expected on \`${ACTION_NAME}\``);
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
ToastAction.displayName = ACTION_NAME;
|
|
69
|
+
const CLOSE_NAME = "ToastClose", ToastCloseFrame = styled(ThemeableStack, {
|
|
70
|
+
name: CLOSE_NAME,
|
|
71
|
+
tag: "button"
|
|
72
|
+
}), ToastClose = React.forwardRef(
|
|
73
|
+
(props, forwardedRef) => {
|
|
74
|
+
const { __scopeToast, ...closeProps } = props, interactiveContext = useToastInteractiveContext(__scopeToast);
|
|
75
|
+
return /* @__PURE__ */ jsx(ToastAnnounceExclude, { asChild: !0, children: /* @__PURE__ */ jsx(
|
|
76
|
+
ToastCloseFrame,
|
|
77
|
+
{
|
|
78
|
+
accessibilityLabel: "Dialog Close",
|
|
79
|
+
...closeProps,
|
|
80
|
+
ref: forwardedRef,
|
|
81
|
+
onPress: composeEventHandlers(props.onPress, interactiveContext.onClose)
|
|
82
|
+
}
|
|
83
|
+
) });
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
ToastClose.displayName = CLOSE_NAME;
|
|
87
|
+
const ToastComponent = React.forwardRef(
|
|
88
|
+
ToastImplFrame.extractable((props, forwardedRef) => {
|
|
89
|
+
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props, [open, setOpen] = useControllableState({
|
|
90
|
+
prop: openProp,
|
|
91
|
+
defaultProp: defaultOpen ?? !0,
|
|
92
|
+
onChange: onOpenChange,
|
|
93
|
+
strategy: "most-recent-wins"
|
|
94
|
+
}), id = React.useId(), onPause = useEvent(props.onPause), onResume = useEvent(props.onResume);
|
|
95
|
+
return forceMount || open ? /* @__PURE__ */ jsx(
|
|
96
|
+
ToastImpl,
|
|
97
|
+
{
|
|
98
|
+
id,
|
|
99
|
+
open,
|
|
100
|
+
...toastProps,
|
|
101
|
+
ref: forwardedRef,
|
|
102
|
+
onClose: () => setOpen(!1),
|
|
103
|
+
onPause,
|
|
104
|
+
onResume,
|
|
105
|
+
onSwipeEnd: composeEventHandlers(props.onSwipeEnd, (event) => {
|
|
106
|
+
setOpen(!1);
|
|
107
|
+
})
|
|
108
|
+
}
|
|
109
|
+
) : null;
|
|
110
|
+
})
|
|
111
|
+
);
|
|
112
|
+
ToastComponent.displayName = TOAST_NAME;
|
|
113
|
+
const Toast = withStaticProperties(
|
|
114
|
+
themeable(ToastComponent, ToastImplFrame.staticConfig),
|
|
115
|
+
{
|
|
116
|
+
Title: ToastTitle,
|
|
117
|
+
Description: ToastDescription,
|
|
118
|
+
Action: ToastAction,
|
|
119
|
+
Close: ToastClose
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
export {
|
|
123
|
+
Toast,
|
|
124
|
+
ToastProvider,
|
|
125
|
+
ToastViewport,
|
|
126
|
+
useToast,
|
|
127
|
+
useToastController,
|
|
128
|
+
useToastState
|
|
129
|
+
};
|
|
130
|
+
//# sourceMappingURL=Toast.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Toast.tsx"],
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Stack,
|
|
3
|
+
Text,
|
|
4
|
+
styled,
|
|
5
|
+
useEvent,
|
|
6
|
+
useIsomorphicLayoutEffect
|
|
7
|
+
} from "@tamagui/core";
|
|
8
|
+
import { Portal } from "@tamagui/portal";
|
|
9
|
+
import { VisuallyHidden } from "@tamagui/visually-hidden";
|
|
10
|
+
import * as React from "react";
|
|
11
|
+
import { useToastProviderContext } from "./ToastProvider";
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
const ToastAnnounceExcludeFrame = styled(Stack, {
|
|
14
|
+
name: "ToastAnnounceExclude"
|
|
15
|
+
}), ToastAnnounceExclude = React.forwardRef((props, forwardedRef) => {
|
|
16
|
+
const { altText, ...announceExcludeProps } = props;
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
ToastAnnounceExcludeFrame,
|
|
19
|
+
{
|
|
20
|
+
"data-toast-announce-exclude": "",
|
|
21
|
+
"data-toast-announce-alt": altText || void 0,
|
|
22
|
+
...announceExcludeProps,
|
|
23
|
+
ref: forwardedRef
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
}), ToastAnnounce = (props) => {
|
|
27
|
+
const { __scopeToast, children, ...announceProps } = props, context = useToastProviderContext(__scopeToast), [renderAnnounceText, setRenderAnnounceText] = React.useState(!1), [isAnnounced, setIsAnnounced] = React.useState(!1);
|
|
28
|
+
return useNextFrame(() => setRenderAnnounceText(!0)), React.useEffect(() => {
|
|
29
|
+
const timer = setTimeout(() => setIsAnnounced(!0), 1e3);
|
|
30
|
+
return () => clearTimeout(timer);
|
|
31
|
+
}, []), isAnnounced ? null : /* @__PURE__ */ jsx(Portal, { asChild: !0, children: /* @__PURE__ */ jsx(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ jsxs(Text, { children: [
|
|
32
|
+
context.label,
|
|
33
|
+
" ",
|
|
34
|
+
children
|
|
35
|
+
] }) }) });
|
|
36
|
+
};
|
|
37
|
+
function useNextFrame(callback = () => {
|
|
38
|
+
}) {
|
|
39
|
+
const fn = useEvent(callback);
|
|
40
|
+
useIsomorphicLayoutEffect(() => {
|
|
41
|
+
let raf1 = 0, raf2 = 0;
|
|
42
|
+
return raf1 = requestAnimationFrame(() => {
|
|
43
|
+
raf2 = requestAnimationFrame(fn);
|
|
44
|
+
}), () => {
|
|
45
|
+
cancelAnimationFrame(raf1), cancelAnimationFrame(raf2);
|
|
46
|
+
};
|
|
47
|
+
}, [fn]);
|
|
48
|
+
}
|
|
49
|
+
export {
|
|
50
|
+
ToastAnnounce,
|
|
51
|
+
ToastAnnounceExclude
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=ToastAnnounce.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ToastAnnounce.tsx"],
|
|
4
|
+
"mappings": "AAAA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAEvB,SAAsB,+BAA+B;AAiBjD,cAoCM,YApCN;AAfJ,MAAM,4BAA4B,OAAO,OAAO;AAAA,EAC9C,MAAM;AACR,CAAC,GAMK,uBAAuB,MAAM,WAGjC,CAAC,OAA+C,iBAAiB;AACjE,QAAM,EAAE,SAAS,GAAG,qBAAqB,IAAI;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,+BAA4B;AAAA,MAC5B,2BAAyB,WAAW;AAAA,MACnC,GAAG;AAAA,MACJ,KAAK;AAAA;AAAA,EACP;AAEJ,CAAC,GAQK,gBAA2D,CAC/D,UACG;AACH,QAAM,EAAE,cAAc,UAAU,GAAG,cAAc,IAAI,OAC/C,UAAU,wBAAwB,YAAY,GAC9C,CAAC,oBAAoB,qBAAqB,IAAI,MAAM,SAAS,EAAK,GAClE,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,EAAK;AAG1D,sBAAa,MAAM,sBAAsB,EAAI,CAAC,GAG9C,MAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,WAAW,MAAM,eAAe,EAAI,GAAG,GAAI;AACzD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC,GAEE,cAAc,OACnB,oBAAC,UAAO,SAAO,IACb,8BAAC,kBAAgB,GAAG,eACjB,gCACC,qBAAC,QACE;AAAA,YAAQ;AAAA,IAAM;AAAA,IAAE;AAAA,KACnB,GAEJ,GACF;AAEJ;AAIA,SAAS,aAAa,WAAW,MAAM;AAAC,GAAG;AACzC,QAAM,KAAK,SAAS,QAAQ;AAC5B,4BAA0B,MAAM;AAC9B,QAAI,OAAO,GACP,OAAO;AACX,kBAAO,sBAAsB,MAAM;AACjC,aAAO,sBAAsB,EAAE;AAAA,IACjC,CAAC,GACM,MAAM;AACX,2BAAqB,IAAI,GACzB,qBAAqB,IAAI;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AACT;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { isWeb } from "@tamagui/core";
|
|
2
|
+
import React, { createContext, useContext, useMemo, useRef } from "react";
|
|
3
|
+
import { Platform } from "react-native";
|
|
4
|
+
import { createNativeToast } from "./createNativeToast";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
const ToastContext = createContext({}), ToastCurrentContext = createContext(null), useToastController = () => useContext(ToastContext), useToastState = () => useContext(ToastCurrentContext), useToast = () => ({
|
|
7
|
+
...useToastController(),
|
|
8
|
+
currentToast: useToastState()
|
|
9
|
+
}), ToastImperativeProvider = ({
|
|
10
|
+
children,
|
|
11
|
+
options
|
|
12
|
+
}) => {
|
|
13
|
+
const counterRef = useRef(0), [toast, setToast] = React.useState(null), [lastNativeToastRef, setLastNativeToastRef] = React.useState(null), show = React.useCallback(
|
|
14
|
+
(title, showOptions) => {
|
|
15
|
+
const native = showOptions?.native ?? options.native, isWebNative = Array.isArray(native) ? native.includes("web") : native === "web", isMobileNative = Array.isArray(native) ? native.includes("mobile") : native === "mobile", isAndroidNative = isMobileNative || (Array.isArray(native) ? native.includes("android") : native === "android"), isIosNative = isMobileNative || (Array.isArray(native) ? native.includes("ios") : native === "ios"), isHandledNatively = native === !0 || isWeb && isWebNative || !isWeb && isMobileNative || Platform.OS === "android" && isAndroidNative || Platform.OS === "ios" && isIosNative;
|
|
16
|
+
if (isHandledNatively) {
|
|
17
|
+
const nativeToastResult = createNativeToast(title, showOptions ?? {});
|
|
18
|
+
typeof nativeToastResult == "object" && nativeToastResult.nativeToastRef && setLastNativeToastRef(nativeToastResult.nativeToastRef);
|
|
19
|
+
}
|
|
20
|
+
return counterRef.current++, setToast({
|
|
21
|
+
...showOptions?.customData,
|
|
22
|
+
...showOptions,
|
|
23
|
+
viewportName: showOptions?.viewportName ?? "default",
|
|
24
|
+
title,
|
|
25
|
+
id: counterRef.current.toString(),
|
|
26
|
+
isHandledNatively
|
|
27
|
+
}), !0;
|
|
28
|
+
},
|
|
29
|
+
[setToast, options.native]
|
|
30
|
+
), hide = React.useCallback(() => {
|
|
31
|
+
lastNativeToastRef?.close(), setToast(null);
|
|
32
|
+
}, [setToast, lastNativeToastRef]), contextValue = useMemo(() => ({
|
|
33
|
+
show,
|
|
34
|
+
hide,
|
|
35
|
+
nativeToast: lastNativeToastRef,
|
|
36
|
+
options
|
|
37
|
+
}), [show, hide, lastNativeToastRef, JSON.stringify(options || null)]);
|
|
38
|
+
return /* @__PURE__ */ jsx(ToastContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ToastCurrentContext.Provider, { value: toast, children }) });
|
|
39
|
+
};
|
|
40
|
+
export {
|
|
41
|
+
ToastImperativeProvider,
|
|
42
|
+
useToast,
|
|
43
|
+
useToastController,
|
|
44
|
+
useToastState
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=ToastImperative.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ToastImperative.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAAsC,aAAa;AACnD,OAAO,SAAS,eAAe,YAAY,SAAS,cAAc;AAClE,SAAS,gBAAgB;AAEzB,SAAS,yBAAyB;AA4K5B;AAhGN,MAAM,eAAe,cAA6B,CAAC,CAAQ,GACrD,sBAAsB,cAAgC,IAAI,GAEnD,qBAAqB,MACzB,WAAW,YAAY,GAGnB,gBAAgB,MACpB,WAAW,mBAAmB,GAI1B,WAAW,OACf;AAAA,EACL,GAAG,mBAAmB;AAAA,EACtB,cAAc,cAAc;AAC9B,IAWW,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,aAAa,OAAO,CAAC,GAErB,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA2B,IAAI,GAEzD,CAAC,oBAAoB,qBAAqB,IAC9C,MAAM,SAAuC,IAAI,GAE7C,OAAO,MAAM;AAAA,IACjB,CAAC,OAAO,gBAAgB;AACtB,YAAM,SAAS,aAAa,UAAU,QAAQ,QACxC,cAAc,MAAM,QAAQ,MAAM,IACpC,OAAO,SAAS,KAAK,IACrB,WAAW,OACT,iBAAiB,MAAM,QAAQ,MAAM,IACvC,OAAO,SAAS,QAAQ,IACxB,WAAW,UACT,kBACJ,mBACC,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,SAAS,IAAI,WAAW,YAC7D,cACJ,mBACC,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,KAAK,IAAI,WAAW,QAEzD,oBACJ,WAAW,MACV,SAAS,eACT,CAAC,SAAS,kBACV,SAAS,OAAO,aAAa,mBAC7B,SAAS,OAAO,SAAS;AAE5B,UAAI,mBAAmB;AACrB,cAAM,oBAAoB,kBAAkB,OAAO,eAAe,CAAC,CAAC;AACpE,QAAI,OAAO,qBAAsB,YAAY,kBAAkB,kBAC7D,sBAAsB,kBAAkB,cAAc;AAAA,MAE1D;AACA,wBAAW,WACX,SAAS;AAAA,QACP,GAAG,aAAa;AAAA,QAChB,GAAG;AAAA,QACH,cAAc,aAAa,gBAAgB;AAAA,QAC3C;AAAA,QACA,IAAI,WAAW,QAAQ,SAAS;AAAA,QAChC;AAAA,MACF,CAAC,GACM;AAAA,IACT;AAAA,IACA,CAAC,UAAU,QAAQ,MAAM;AAAA,EAC3B,GACM,OAAO,MAAM,YAAY,MAAM;AACnC,wBAAoB,MAAM,GAC1B,SAAS,IAAI;AAAA,EACf,GAAG,CAAC,UAAU,kBAAkB,CAAC,GAE3B,eAAe,QAAQ,OACpB;AAAA,IACL;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,EACF,IACC,CAAC,MAAM,MAAM,oBAAoB,KAAK,UAAU,WAAW,IAAI,CAAC,CAAC;AAEpE,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,cAC5B,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,OAClC,UACH,GACF;AAEJ;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
import { useIsPresent } from "@tamagui/animate-presence";
|
|
2
|
+
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
3
|
+
import {
|
|
4
|
+
Theme,
|
|
5
|
+
composeEventHandlers,
|
|
6
|
+
createStyledContext,
|
|
7
|
+
isWeb,
|
|
8
|
+
styled,
|
|
9
|
+
useConfiguration,
|
|
10
|
+
useEvent,
|
|
11
|
+
useThemeName
|
|
12
|
+
} from "@tamagui/core";
|
|
13
|
+
import { Dismissable } from "@tamagui/dismissable";
|
|
14
|
+
import { PortalItem } from "@tamagui/portal";
|
|
15
|
+
import { ThemeableStack } from "@tamagui/stacks";
|
|
16
|
+
import * as React from "react";
|
|
17
|
+
import {
|
|
18
|
+
PanResponder
|
|
19
|
+
} from "react-native";
|
|
20
|
+
import { TOAST_CONTEXT, TOAST_NAME } from "./constants";
|
|
21
|
+
import { ToastAnnounce } from "./ToastAnnounce";
|
|
22
|
+
import {
|
|
23
|
+
Collection,
|
|
24
|
+
useToastProviderContext
|
|
25
|
+
} from "./ToastProvider";
|
|
26
|
+
import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from "./ToastViewport";
|
|
27
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
28
|
+
const ToastImplFrame = styled(ThemeableStack, {
|
|
29
|
+
name: "ToastImpl",
|
|
30
|
+
focusable: !0,
|
|
31
|
+
variants: {
|
|
32
|
+
unstyled: {
|
|
33
|
+
false: {
|
|
34
|
+
focusStyle: {
|
|
35
|
+
outlineStyle: "solid",
|
|
36
|
+
outlineWidth: 2,
|
|
37
|
+
outlineColor: "$borderColorHover"
|
|
38
|
+
},
|
|
39
|
+
backgroundColor: "$color6",
|
|
40
|
+
borderRadius: "$10",
|
|
41
|
+
paddingHorizontal: "$5",
|
|
42
|
+
paddingVertical: "$2",
|
|
43
|
+
marginHorizontal: "auto",
|
|
44
|
+
marginVertical: "$1"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
defaultVariants: {
|
|
49
|
+
unstyled: !1
|
|
50
|
+
}
|
|
51
|
+
}), {
|
|
52
|
+
Provider: ToastInteractiveProvider,
|
|
53
|
+
useStyledContext: useToastInteractiveContext
|
|
54
|
+
} = createStyledContext({
|
|
55
|
+
onClose() {
|
|
56
|
+
}
|
|
57
|
+
}), ToastImpl = React.forwardRef(
|
|
58
|
+
(props, forwardedRef) => {
|
|
59
|
+
const {
|
|
60
|
+
__scopeToast,
|
|
61
|
+
type = "foreground",
|
|
62
|
+
duration: durationProp,
|
|
63
|
+
open,
|
|
64
|
+
onClose,
|
|
65
|
+
onEscapeKeyDown,
|
|
66
|
+
onPause,
|
|
67
|
+
onResume,
|
|
68
|
+
onSwipeStart,
|
|
69
|
+
onSwipeMove,
|
|
70
|
+
onSwipeCancel,
|
|
71
|
+
onSwipeEnd,
|
|
72
|
+
viewportName = "default",
|
|
73
|
+
...toastProps
|
|
74
|
+
} = props, isPresent = useIsPresent(), context = useToastProviderContext(__scopeToast), [node, setNode] = React.useState(null), composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2)), duration = durationProp || context.duration, closeTimerStartTimeRef = React.useRef(0), closeTimerRemainingTimeRef = React.useRef(duration), closeTimerRef = React.useRef(0), { onToastAdd, onToastRemove } = context, viewport = React.useMemo(() => context.viewports[viewportName], [context.viewports, viewportName]), handleClose = useEvent(() => {
|
|
75
|
+
isPresent && (isWeb && node?.contains(document.activeElement) && viewport?.focus(), onClose());
|
|
76
|
+
}), startTimer = React.useCallback(
|
|
77
|
+
(duration2) => {
|
|
78
|
+
!duration2 || duration2 === 1 / 0 || (clearTimeout(closeTimerRef.current), closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime(), closeTimerRef.current = setTimeout(handleClose, duration2));
|
|
79
|
+
},
|
|
80
|
+
[handleClose]
|
|
81
|
+
), handleResume = React.useCallback(() => {
|
|
82
|
+
startTimer(closeTimerRemainingTimeRef.current), onResume?.();
|
|
83
|
+
}, [onResume, startTimer]), handlePause = React.useCallback(() => {
|
|
84
|
+
const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
|
|
85
|
+
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime, window.clearTimeout(closeTimerRef.current), onPause?.();
|
|
86
|
+
}, [onPause]);
|
|
87
|
+
React.useEffect(() => {
|
|
88
|
+
if (isWeb && viewport)
|
|
89
|
+
return viewport.addEventListener(VIEWPORT_PAUSE, handlePause), viewport.addEventListener(VIEWPORT_RESUME, handleResume), () => {
|
|
90
|
+
viewport.removeEventListener(VIEWPORT_PAUSE, handlePause), viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
|
|
91
|
+
};
|
|
92
|
+
}, [viewport, duration, onPause, onResume, startTimer]), React.useEffect(() => {
|
|
93
|
+
open && !context.isClosePausedRef.current && startTimer(duration);
|
|
94
|
+
}, [open, duration, context.isClosePausedRef, startTimer]), React.useEffect(() => (onToastAdd(), () => onToastRemove()), [onToastAdd, onToastRemove]);
|
|
95
|
+
const announceTextContent = React.useMemo(() => isWeb && node ? getAnnounceTextContent(node) : null, [node]), isHorizontalSwipe = ["left", "right", "horizontal"].includes(
|
|
96
|
+
context.swipeDirection
|
|
97
|
+
), { animationDriver } = useConfiguration();
|
|
98
|
+
if (!animationDriver)
|
|
99
|
+
throw new Error("Must set animations in tamagui.config.ts");
|
|
100
|
+
const { useAnimatedNumber, useAnimatedNumberStyle } = animationDriver, animatedNumber = useAnimatedNumber(0), AnimatedView = animationDriver.NumberView ?? animationDriver.View, animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {
|
|
101
|
+
"worklet";
|
|
102
|
+
return {
|
|
103
|
+
transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }]
|
|
104
|
+
};
|
|
105
|
+
}), panResponder = React.useMemo(() => PanResponder.create({
|
|
106
|
+
onMoveShouldSetPanResponder: (e, gesture) => shouldGrantGestureMove(context.swipeDirection, gesture) ? (onSwipeStart?.(e), !0) : !1,
|
|
107
|
+
onPanResponderGrant: (e) => {
|
|
108
|
+
isWeb || handlePause?.();
|
|
109
|
+
},
|
|
110
|
+
onPanResponderMove: (e, gesture) => {
|
|
111
|
+
const { x, y } = getGestureDistance(context.swipeDirection, gesture), delta = { x, y };
|
|
112
|
+
animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: "direct" }), isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold) && onSwipeEnd?.(e), onSwipeMove?.(e);
|
|
113
|
+
},
|
|
114
|
+
onPanResponderEnd: (e, { dx, dy }) => {
|
|
115
|
+
isDeltaInDirection(
|
|
116
|
+
{ x: dx, y: dy },
|
|
117
|
+
context.swipeDirection,
|
|
118
|
+
context.swipeThreshold
|
|
119
|
+
) || (isWeb || handleResume?.(), onSwipeCancel?.(e), animatedNumber.setValue(0, { type: "spring" }));
|
|
120
|
+
}
|
|
121
|
+
}), [handlePause, handleResume]), themeName = useThemeName();
|
|
122
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
123
|
+
announceTextContent && /* @__PURE__ */ jsx(
|
|
124
|
+
ToastAnnounce,
|
|
125
|
+
{
|
|
126
|
+
__scopeToast,
|
|
127
|
+
role: "status",
|
|
128
|
+
"aria-live": type === "foreground" ? "assertive" : "polite",
|
|
129
|
+
"aria-atomic": !0,
|
|
130
|
+
children: announceTextContent
|
|
131
|
+
}
|
|
132
|
+
),
|
|
133
|
+
/* @__PURE__ */ jsx(PortalItem, { hostName: viewportName ?? "default", children: /* @__PURE__ */ jsx(
|
|
134
|
+
ToastInteractiveProvider,
|
|
135
|
+
{
|
|
136
|
+
scope: __scopeToast,
|
|
137
|
+
onClose: () => {
|
|
138
|
+
handleClose();
|
|
139
|
+
},
|
|
140
|
+
children: /* @__PURE__ */ jsx(
|
|
141
|
+
Dismissable,
|
|
142
|
+
{
|
|
143
|
+
onEscapeKeyDown: composeEventHandlers(onEscapeKeyDown, () => {
|
|
144
|
+
context.isFocusedToastEscapeKeyDownRef.current || handleClose(), context.isFocusedToastEscapeKeyDownRef.current = !1;
|
|
145
|
+
}),
|
|
146
|
+
children: /* @__PURE__ */ jsx(Theme, { forceClassName: !0, name: themeName, children: /* @__PURE__ */ jsx(
|
|
147
|
+
AnimatedView,
|
|
148
|
+
{
|
|
149
|
+
...panResponder?.panHandlers,
|
|
150
|
+
style: [{ margin: "auto" }, animatedStyles],
|
|
151
|
+
children: /* @__PURE__ */ jsx(Collection.ItemSlot, { __scopeCollection: __scopeToast || TOAST_CONTEXT, children: /* @__PURE__ */ jsx(
|
|
152
|
+
ToastImplFrame,
|
|
153
|
+
{
|
|
154
|
+
role: "status",
|
|
155
|
+
"aria-live": "off",
|
|
156
|
+
"aria-atomic": !0,
|
|
157
|
+
"data-state": open ? "open" : "closed",
|
|
158
|
+
"data-swipe-direction": context.swipeDirection,
|
|
159
|
+
pointerEvents: "auto",
|
|
160
|
+
userSelect: "none",
|
|
161
|
+
...toastProps,
|
|
162
|
+
ref: composedRefs,
|
|
163
|
+
...isWeb && {
|
|
164
|
+
onKeyDown: composeEventHandlers(
|
|
165
|
+
props.onKeyDown,
|
|
166
|
+
(event) => {
|
|
167
|
+
event.key === "Escape" && (onEscapeKeyDown?.(event), onEscapeKeyDown?.(event), event.defaultPrevented || (context.isFocusedToastEscapeKeyDownRef.current = !0, handleClose()));
|
|
168
|
+
}
|
|
169
|
+
)
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
) })
|
|
173
|
+
}
|
|
174
|
+
) })
|
|
175
|
+
}
|
|
176
|
+
)
|
|
177
|
+
},
|
|
178
|
+
props.id
|
|
179
|
+
) })
|
|
180
|
+
] });
|
|
181
|
+
}
|
|
182
|
+
);
|
|
183
|
+
ToastImpl.propTypes = {
|
|
184
|
+
type(props) {
|
|
185
|
+
if (props.type && !["foreground", "background"].includes(props.type)) {
|
|
186
|
+
const error = `Invalid prop \`type\` supplied to \`${TOAST_NAME}\`. Expected \`foreground | background\`.`;
|
|
187
|
+
return new Error(error);
|
|
188
|
+
}
|
|
189
|
+
return null;
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
const isDeltaInDirection = (delta, direction, threshold = 0) => {
|
|
193
|
+
const deltaX = Math.abs(delta.x), deltaY = Math.abs(delta.y), isDeltaX = deltaX > deltaY;
|
|
194
|
+
return direction === "left" || direction === "right" || direction === "horizontal" ? isDeltaX && deltaX > threshold : !isDeltaX && deltaY > threshold;
|
|
195
|
+
};
|
|
196
|
+
function getAnnounceTextContent(container) {
|
|
197
|
+
if (!isWeb)
|
|
198
|
+
return "";
|
|
199
|
+
const textContent = [];
|
|
200
|
+
return Array.from(container.childNodes).forEach((node) => {
|
|
201
|
+
if (node.nodeType === node.TEXT_NODE && node.textContent && textContent.push(node.textContent), isHTMLElement(node)) {
|
|
202
|
+
const isHidden = node.ariaHidden || node.hidden || node.style.display === "none", isExcluded = node.dataset.toastAnnounceExclude === "";
|
|
203
|
+
if (!isHidden)
|
|
204
|
+
if (isExcluded) {
|
|
205
|
+
const altText = node.dataset.toastAnnounceAlt;
|
|
206
|
+
altText && textContent.push(altText);
|
|
207
|
+
} else
|
|
208
|
+
textContent.push(...getAnnounceTextContent(node));
|
|
209
|
+
}
|
|
210
|
+
}), textContent;
|
|
211
|
+
}
|
|
212
|
+
function isHTMLElement(node) {
|
|
213
|
+
return node.nodeType === node.ELEMENT_NODE;
|
|
214
|
+
}
|
|
215
|
+
const GESTURE_GRANT_THRESHOLD = 10, shouldGrantGestureMove = (dir, { dx, dy }) => (dir === "horizontal" || dir === "left") && dx < -GESTURE_GRANT_THRESHOLD || (dir === "horizontal" || dir === "right") && dx > GESTURE_GRANT_THRESHOLD || (dir === "vertical" || dir === "up") && dy > -GESTURE_GRANT_THRESHOLD ? !0 : (dir === "vertical" || dir === "down") && dy < GESTURE_GRANT_THRESHOLD, getGestureDistance = (dir, { dx, dy }) => {
|
|
216
|
+
let y = 0, x = 0;
|
|
217
|
+
return dir === "horizontal" ? x = dx : dir === "left" ? x = Math.min(0, dx) : dir === "right" ? x = Math.max(0, dx) : dir === "vertical" ? y = dy : dir === "up" ? y = Math.min(0, dy) : dir === "down" && (y = Math.max(0, dy)), {
|
|
218
|
+
x,
|
|
219
|
+
y
|
|
220
|
+
};
|
|
221
|
+
};
|
|
222
|
+
export {
|
|
223
|
+
ToastImpl,
|
|
224
|
+
ToastImplFrame,
|
|
225
|
+
useToastInteractiveContext
|
|
226
|
+
};
|
|
227
|
+
//# sourceMappingURL=ToastImpl.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ToastImpl.tsx"],
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": ["node", "duration"]
|
|
6
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { createCollection } from "@tamagui/collection";
|
|
2
|
+
import { createStyledContext } from "@tamagui/core";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { TOAST_CONTEXT } from "./constants";
|
|
5
|
+
import { ToastImperativeProvider } from "./ToastImperative";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
const PROVIDER_NAME = "ToastProvider", [Collection, useCollection] = createCollection("Toast"), { Provider: ToastProviderProvider, useStyledContext: useToastProviderContext } = createStyledContext(), ToastProvider = (props) => {
|
|
8
|
+
const {
|
|
9
|
+
__scopeToast,
|
|
10
|
+
id: providedId,
|
|
11
|
+
burntOptions,
|
|
12
|
+
native,
|
|
13
|
+
notificationOptions,
|
|
14
|
+
label = "Notification",
|
|
15
|
+
duration = 5e3,
|
|
16
|
+
swipeDirection = "right",
|
|
17
|
+
swipeThreshold = 50,
|
|
18
|
+
children
|
|
19
|
+
} = props, id = providedId ?? React.useId(), [viewports, setViewports] = React.useState({}), [toastCount, setToastCount] = React.useState(0), isFocusedToastEscapeKeyDownRef = React.useRef(!1), isClosePausedRef = React.useRef(!1), handleViewportChange = React.useCallback(
|
|
20
|
+
(name, viewport) => {
|
|
21
|
+
setViewports((prev) => ({ ...prev, [name]: viewport }));
|
|
22
|
+
},
|
|
23
|
+
[]
|
|
24
|
+
), options = React.useMemo(() => ({
|
|
25
|
+
duration,
|
|
26
|
+
burntOptions,
|
|
27
|
+
native,
|
|
28
|
+
notificationOptions
|
|
29
|
+
}), [JSON.stringify([duration, burntOptions, native, notificationOptions])]);
|
|
30
|
+
return /* @__PURE__ */ jsx(Collection.Provider, { __scopeCollection: __scopeToast || TOAST_CONTEXT, children: /* @__PURE__ */ jsx(
|
|
31
|
+
ToastProviderProvider,
|
|
32
|
+
{
|
|
33
|
+
scope: __scopeToast,
|
|
34
|
+
id,
|
|
35
|
+
label,
|
|
36
|
+
duration,
|
|
37
|
+
swipeDirection,
|
|
38
|
+
swipeThreshold,
|
|
39
|
+
toastCount,
|
|
40
|
+
viewports,
|
|
41
|
+
onViewportChange: handleViewportChange,
|
|
42
|
+
onToastAdd: React.useCallback(() => {
|
|
43
|
+
setToastCount((prevCount) => prevCount + 1);
|
|
44
|
+
}, []),
|
|
45
|
+
onToastRemove: React.useCallback(() => {
|
|
46
|
+
setToastCount((prevCount) => prevCount - 1);
|
|
47
|
+
}, []),
|
|
48
|
+
isFocusedToastEscapeKeyDownRef,
|
|
49
|
+
isClosePausedRef,
|
|
50
|
+
children: /* @__PURE__ */ jsx(ToastImperativeProvider, { options, children })
|
|
51
|
+
}
|
|
52
|
+
) });
|
|
53
|
+
};
|
|
54
|
+
ToastProvider.propTypes = {
|
|
55
|
+
label(props) {
|
|
56
|
+
if (props.label && typeof props.label == "string" && !props.label.trim()) {
|
|
57
|
+
const error = `Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
|
|
58
|
+
return new Error(error);
|
|
59
|
+
}
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
ToastProvider.displayName = PROVIDER_NAME;
|
|
64
|
+
export {
|
|
65
|
+
Collection,
|
|
66
|
+
ToastProvider,
|
|
67
|
+
useCollection,
|
|
68
|
+
useToastProviderContext
|
|
69
|
+
};
|
|
70
|
+
//# sourceMappingURL=ToastProvider.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ToastProvider.tsx"],
|
|
4
|
+
"mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAsC,2BAA2B;AACjE,YAAY,WAAW;AAEvB,SAAS,qBAAqB;AAC9B,SAAS,+BAA+B;AA6IhC;AAtIR,MAAM,gBAAgB,iBAEhB,CAAC,YAAY,aAAa,IAAI,iBAAiC,OAAO,GA0BtE,EAAE,UAAU,uBAAuB,kBAAkB,wBAAwB,IACjF,oBAA+C,GA2C3C,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI,OACE,KAAK,cAAc,MAAM,MAAM,GAC/B,CAAC,WAAW,YAAY,IAAI,MAAM,SAEtC,CAAC,CAAC,GACE,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC,GAC9C,iCAAiC,MAAM,OAAO,EAAK,GACnD,mBAAmB,MAAM,OAAO,EAAK,GAErC,uBAAuB,MAAM;AAAA,IACjC,CAAC,MAAc,aAAoC;AACjD,mBAAa,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,EAAE;AAAA,IACxD;AAAA,IACA,CAAC;AAAA,EACH,GAGM,UAAU,MAAM,QAAQ,OACrB;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAEC,CAAC,KAAK,UAAU,CAAC,UAAU,cAAc,QAAQ,mBAAmB,CAAC,CAAC,CAAC;AAE1E,SACE,oBAAC,WAAW,UAAX,EAAoB,mBAAmB,gBAAgB,eACtD;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY,MAAM,YAAY,MAAM;AAClC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL,eAAe,MAAM,YAAY,MAAM;AACrC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,MACA;AAAA,MAEA,8BAAC,2BAAwB,SAAmB,UAAS;AAAA;AAAA,EACvD,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,MAAM,OAAO;AACX,QAAI,MAAM,SAAS,OAAO,MAAM,SAAU,YAAY,CAAC,MAAM,MAAM,KAAK,GAAG;AACzE,YAAM,QAAQ,wCAAwC,aAAa;AACnE,aAAO,IAAI,MAAM,KAAK;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AACF;AAEA,cAAc,cAAc;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
2
|
+
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
3
|
+
import { isWeb, styled } from "@tamagui/core";
|
|
4
|
+
import { PortalHost } from "@tamagui/portal";
|
|
5
|
+
import { YStack } from "@tamagui/stacks";
|
|
6
|
+
import { VisuallyHidden } from "@tamagui/visually-hidden";
|
|
7
|
+
import * as React from "react";
|
|
8
|
+
import { TOAST_CONTEXT } from "./constants";
|
|
9
|
+
import {
|
|
10
|
+
Collection,
|
|
11
|
+
useCollection,
|
|
12
|
+
useToastProviderContext
|
|
13
|
+
} from "./ToastProvider";
|
|
14
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
+
const VIEWPORT_NAME = "ToastViewport", VIEWPORT_DEFAULT_HOTKEY = ["F8"], VIEWPORT_PAUSE = "toast.viewportPause", VIEWPORT_RESUME = "toast.viewportResume", ToastViewportWrapperFrame = styled(YStack, {
|
|
16
|
+
name: "ViewportWrapper",
|
|
17
|
+
variants: {
|
|
18
|
+
unstyled: {
|
|
19
|
+
false: {
|
|
20
|
+
pointerEvents: "box-none",
|
|
21
|
+
top: 0,
|
|
22
|
+
bottom: 0,
|
|
23
|
+
left: 0,
|
|
24
|
+
right: 0,
|
|
25
|
+
position: isWeb ? "fixed" : "absolute",
|
|
26
|
+
maxWidth: "100%",
|
|
27
|
+
tabIndex: 0,
|
|
28
|
+
zIndex: 1e5
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
defaultVariants: {
|
|
33
|
+
unstyled: !1
|
|
34
|
+
}
|
|
35
|
+
}), ToastViewportFrame = styled(YStack, {
|
|
36
|
+
name: VIEWPORT_NAME,
|
|
37
|
+
variants: {
|
|
38
|
+
unstyled: {
|
|
39
|
+
false: {
|
|
40
|
+
pointerEvents: "box-none",
|
|
41
|
+
position: isWeb ? "fixed" : "absolute",
|
|
42
|
+
maxWidth: "100%"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
defaultVariants: {
|
|
47
|
+
unstyled: !1
|
|
48
|
+
}
|
|
49
|
+
}), ToastViewport = React.forwardRef(
|
|
50
|
+
(props, forwardedRef) => {
|
|
51
|
+
const {
|
|
52
|
+
__scopeToast,
|
|
53
|
+
hotkey = VIEWPORT_DEFAULT_HOTKEY,
|
|
54
|
+
label = "Notifications ({hotkey})",
|
|
55
|
+
name = "default",
|
|
56
|
+
multipleToasts,
|
|
57
|
+
...viewportProps
|
|
58
|
+
} = props, context = useToastProviderContext(__scopeToast), getItems = useCollection(__scopeToast || TOAST_CONTEXT), headFocusProxyRef = React.useRef(null), tailFocusProxyRef = React.useRef(null), wrapperRef = React.useRef(null), ref = React.useRef(null), onViewportChange = React.useCallback(
|
|
59
|
+
(el) => {
|
|
60
|
+
context.viewports[name] !== el && context.onViewportChange(name, el);
|
|
61
|
+
},
|
|
62
|
+
[name, context.viewports]
|
|
63
|
+
), composedRefs = useComposedRefs(forwardedRef, ref, onViewportChange), hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, ""), hasToasts = context.toastCount > 0;
|
|
64
|
+
React.useEffect(() => {
|
|
65
|
+
if (!isWeb || context.toastCount === 0)
|
|
66
|
+
return;
|
|
67
|
+
const handleKeyDown = (event) => {
|
|
68
|
+
hotkey.every(
|
|
69
|
+
(key) => event[key] || event.code === key
|
|
70
|
+
) && ref.current?.focus();
|
|
71
|
+
};
|
|
72
|
+
return document.addEventListener("keydown", handleKeyDown), () => {
|
|
73
|
+
document.removeEventListener("keydown", handleKeyDown);
|
|
74
|
+
};
|
|
75
|
+
}, [hotkey, context.toastCount]), React.useEffect(() => {
|
|
76
|
+
if (!isWeb || context.toastCount === 0)
|
|
77
|
+
return;
|
|
78
|
+
const wrapper = wrapperRef.current, viewport = ref.current;
|
|
79
|
+
if (hasToasts && wrapper && viewport) {
|
|
80
|
+
const handlePause = () => {
|
|
81
|
+
if (!context.isClosePausedRef.current) {
|
|
82
|
+
const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
|
|
83
|
+
viewport.dispatchEvent(pauseEvent), context.isClosePausedRef.current = !0;
|
|
84
|
+
}
|
|
85
|
+
}, handleResume = () => {
|
|
86
|
+
if (context.isClosePausedRef.current) {
|
|
87
|
+
const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
|
|
88
|
+
viewport.dispatchEvent(resumeEvent), context.isClosePausedRef.current = !1;
|
|
89
|
+
}
|
|
90
|
+
}, handleFocusOutResume = (event) => {
|
|
91
|
+
!wrapper.contains(
|
|
92
|
+
event.relatedTarget
|
|
93
|
+
) && handleResume();
|
|
94
|
+
}, handlePointerLeaveResume = () => {
|
|
95
|
+
wrapper.contains(document.activeElement) || handleResume();
|
|
96
|
+
};
|
|
97
|
+
return wrapper.addEventListener("focusin", handlePause), wrapper.addEventListener("focusout", handleFocusOutResume), wrapper.addEventListener("pointermove", handlePause), wrapper.addEventListener("pointerleave", handlePointerLeaveResume), window.addEventListener("blur", handlePause), window.addEventListener("focus", handleResume), () => {
|
|
98
|
+
wrapper.removeEventListener("focusin", handlePause), wrapper.removeEventListener("focusout", handleFocusOutResume), wrapper.removeEventListener("pointermove", handlePause), wrapper.removeEventListener("pointerleave", handlePointerLeaveResume), window.removeEventListener("blur", handlePause), window.removeEventListener("focus", handleResume);
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
}, [hasToasts, context.isClosePausedRef, context.toastCount]);
|
|
102
|
+
const getSortedTabbableCandidates = React.useCallback(
|
|
103
|
+
({ tabbingDirection }) => {
|
|
104
|
+
const tabbableCandidates = getItems().map((toastItem) => {
|
|
105
|
+
const toastNode = toastItem.ref.current, toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
|
|
106
|
+
return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
|
|
107
|
+
});
|
|
108
|
+
return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
|
|
109
|
+
},
|
|
110
|
+
[getItems]
|
|
111
|
+
);
|
|
112
|
+
return React.useEffect(() => {
|
|
113
|
+
if (!isWeb || context.toastCount === 0)
|
|
114
|
+
return;
|
|
115
|
+
const viewport = ref.current;
|
|
116
|
+
if (viewport) {
|
|
117
|
+
const handleKeyDown = (event) => {
|
|
118
|
+
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
119
|
+
if (event.key === "Tab" && !isMetaKey) {
|
|
120
|
+
const focusedElement = document.activeElement, isTabbingBackwards = event.shiftKey;
|
|
121
|
+
if (event.target === viewport && isTabbingBackwards) {
|
|
122
|
+
headFocusProxyRef.current?.focus();
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection: isTabbingBackwards ? "backwards" : "forwards" }), index = sortedCandidates.findIndex(
|
|
126
|
+
(candidate) => candidate === focusedElement
|
|
127
|
+
);
|
|
128
|
+
focusFirst(sortedCandidates.slice(index + 1)) ? event.preventDefault() : isTabbingBackwards ? (
|
|
129
|
+
// @ts-ignore ali TODO type
|
|
130
|
+
headFocusProxyRef.current?.focus()
|
|
131
|
+
) : (
|
|
132
|
+
// @ts-ignore ali TODO type
|
|
133
|
+
tailFocusProxyRef.current?.focus()
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
return viewport.addEventListener("keydown", handleKeyDown), () => viewport.removeEventListener("keydown", handleKeyDown);
|
|
138
|
+
}
|
|
139
|
+
}, [getItems, getSortedTabbableCandidates, context.toastCount]), /* @__PURE__ */ jsxs(
|
|
140
|
+
ToastViewportWrapperFrame,
|
|
141
|
+
{
|
|
142
|
+
ref: wrapperRef,
|
|
143
|
+
role: "region",
|
|
144
|
+
"aria-label": label.replace("{hotkey}", hotkeyLabel),
|
|
145
|
+
tabIndex: -1,
|
|
146
|
+
children: [
|
|
147
|
+
hasToasts && /* @__PURE__ */ jsx(
|
|
148
|
+
FocusProxy,
|
|
149
|
+
{
|
|
150
|
+
__scopeToast,
|
|
151
|
+
viewportName: name,
|
|
152
|
+
ref: headFocusProxyRef,
|
|
153
|
+
onFocusFromOutsideViewport: () => {
|
|
154
|
+
const tabbableCandidates = getSortedTabbableCandidates({
|
|
155
|
+
tabbingDirection: "forwards"
|
|
156
|
+
});
|
|
157
|
+
focusFirst(tabbableCandidates);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
),
|
|
161
|
+
/* @__PURE__ */ jsx(Collection.Slot, { __scopeCollection: __scopeToast || TOAST_CONTEXT, children: /* @__PURE__ */ jsx(
|
|
162
|
+
ToastViewportFrame,
|
|
163
|
+
{
|
|
164
|
+
focusable: context.toastCount > 0,
|
|
165
|
+
ref: composedRefs,
|
|
166
|
+
...viewportProps,
|
|
167
|
+
children: /* @__PURE__ */ jsx(
|
|
168
|
+
PortalHost,
|
|
169
|
+
{
|
|
170
|
+
render: (children) => /* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: !multipleToasts, children }),
|
|
171
|
+
name: name ?? "default"
|
|
172
|
+
}
|
|
173
|
+
)
|
|
174
|
+
}
|
|
175
|
+
) }),
|
|
176
|
+
hasToasts && /* @__PURE__ */ jsx(
|
|
177
|
+
FocusProxy,
|
|
178
|
+
{
|
|
179
|
+
__scopeToast,
|
|
180
|
+
viewportName: name,
|
|
181
|
+
ref: tailFocusProxyRef,
|
|
182
|
+
onFocusFromOutsideViewport: () => {
|
|
183
|
+
const tabbableCandidates = getSortedTabbableCandidates({
|
|
184
|
+
tabbingDirection: "backwards"
|
|
185
|
+
});
|
|
186
|
+
focusFirst(tabbableCandidates);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
)
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
);
|
|
195
|
+
ToastViewport.displayName = VIEWPORT_NAME;
|
|
196
|
+
const FOCUS_PROXY_NAME = "ToastFocusProxy", FocusProxy = React.forwardRef(
|
|
197
|
+
(props, forwardedRef) => {
|
|
198
|
+
const { __scopeToast, onFocusFromOutsideViewport, viewportName, ...proxyProps } = props, viewport = useToastProviderContext(__scopeToast).viewports[viewportName];
|
|
199
|
+
return /* @__PURE__ */ jsx(
|
|
200
|
+
VisuallyHidden,
|
|
201
|
+
{
|
|
202
|
+
"aria-hidden": !0,
|
|
203
|
+
tabIndex: 0,
|
|
204
|
+
...proxyProps,
|
|
205
|
+
ref: forwardedRef,
|
|
206
|
+
position: isWeb ? "fixed" : "absolute",
|
|
207
|
+
onFocus: (event) => {
|
|
208
|
+
if (!isWeb)
|
|
209
|
+
return;
|
|
210
|
+
const prevFocusedElement = event.relatedTarget;
|
|
211
|
+
!viewport?.contains(prevFocusedElement) && onFocusFromOutsideViewport();
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
);
|
|
217
|
+
FocusProxy.displayName = FOCUS_PROXY_NAME;
|
|
218
|
+
function focusFirst(candidates) {
|
|
219
|
+
if (!isWeb)
|
|
220
|
+
return;
|
|
221
|
+
const previouslyFocusedElement = document.activeElement;
|
|
222
|
+
return candidates.some((candidate) => candidate === previouslyFocusedElement ? !0 : (candidate.focus(), document.activeElement !== previouslyFocusedElement));
|
|
223
|
+
}
|
|
224
|
+
function getTabbableCandidates(container) {
|
|
225
|
+
if (!isWeb)
|
|
226
|
+
return [];
|
|
227
|
+
const containerHtml = container, nodes = [], walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {
|
|
228
|
+
acceptNode: (node) => {
|
|
229
|
+
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
230
|
+
return node.disabled || node.hidden || isHiddenInput ? NodeFilter.FILTER_SKIP : node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
231
|
+
}
|
|
232
|
+
});
|
|
233
|
+
for (; walker.nextNode(); )
|
|
234
|
+
nodes.push(walker.currentNode);
|
|
235
|
+
return nodes;
|
|
236
|
+
}
|
|
237
|
+
export {
|
|
238
|
+
ToastViewport,
|
|
239
|
+
VIEWPORT_DEFAULT_HOTKEY,
|
|
240
|
+
VIEWPORT_PAUSE,
|
|
241
|
+
VIEWPORT_RESUME
|
|
242
|
+
};
|
|
243
|
+
//# sourceMappingURL=ToastViewport.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ToastViewport.tsx"],
|
|
4
|
+
"mappings": "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",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const createNativeToast = (title, { message, duration, burntOptions }) => (require("burnt").toast({
|
|
2
|
+
title,
|
|
3
|
+
message,
|
|
4
|
+
duration: duration ? duration / 1e3 : void 0,
|
|
5
|
+
...burntOptions
|
|
6
|
+
}), !0), hideNativeToast = () => {
|
|
7
|
+
require("burnt").dismissAllAlerts();
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
createNativeToast,
|
|
11
|
+
hideNativeToast
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=createNativeToast.native.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/createNativeToast.native.tsx"],
|
|
4
|
+
"mappings": "AAEO,MAAM,oBAA0C,CACrD,OACA,EAAE,SAAS,UAAU,aAAa,OAGpB,QAAQ,OAAO,EAEvB,MAAM;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU,WAAW,WAAW,MAAO;AAAA,EACvC,GAAG;AACL,CAAC,GACM,KAGI,kBAAsC,MAAM;AAEvD,EADc,QAAQ,OAAO,EACvB,iBAAiB;AACzB;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=types.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/toast",
|
|
3
|
-
"version": "1.74.
|
|
3
|
+
"version": "1.74.4",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"types": "./types/index.d.ts",
|
|
6
6
|
"main": "dist/cjs",
|
|
@@ -31,24 +31,24 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@tamagui/animate-presence": "1.74.
|
|
35
|
-
"@tamagui/compose-refs": "1.74.
|
|
36
|
-
"@tamagui/core": "1.74.
|
|
37
|
-
"@tamagui/create-context": "1.74.
|
|
38
|
-
"@tamagui/dismissable": "1.74.
|
|
39
|
-
"@tamagui/polyfill-dev": "1.74.
|
|
40
|
-
"@tamagui/portal": "1.74.
|
|
41
|
-
"@tamagui/stacks": "1.74.
|
|
42
|
-
"@tamagui/text": "1.74.
|
|
43
|
-
"@tamagui/use-controllable-state": "1.74.
|
|
44
|
-
"@tamagui/visually-hidden": "1.74.
|
|
34
|
+
"@tamagui/animate-presence": "1.74.4",
|
|
35
|
+
"@tamagui/compose-refs": "1.74.4",
|
|
36
|
+
"@tamagui/core": "1.74.4",
|
|
37
|
+
"@tamagui/create-context": "1.74.4",
|
|
38
|
+
"@tamagui/dismissable": "1.74.4",
|
|
39
|
+
"@tamagui/polyfill-dev": "1.74.4",
|
|
40
|
+
"@tamagui/portal": "1.74.4",
|
|
41
|
+
"@tamagui/stacks": "1.74.4",
|
|
42
|
+
"@tamagui/text": "1.74.4",
|
|
43
|
+
"@tamagui/use-controllable-state": "1.74.4",
|
|
44
|
+
"@tamagui/visually-hidden": "1.74.4"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": "*",
|
|
48
48
|
"react-native": "*"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@tamagui/build": "1.74.
|
|
51
|
+
"@tamagui/build": "1.74.4",
|
|
52
52
|
"burnt": "^0.11.0",
|
|
53
53
|
"react": "^18.2.0",
|
|
54
54
|
"react-native": "^0.72.1"
|