@metamask/design-system-react 0.25.0 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -1
- package/dist/components/AvatarIcon/AvatarIcon.constants.cjs +2 -2
- package/dist/components/AvatarIcon/AvatarIcon.constants.cjs.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.constants.mjs +2 -2
- package/dist/components/AvatarIcon/AvatarIcon.constants.mjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs +1 -2
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.d.cts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.d.mts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs +1 -2
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
- package/dist/components/AvatarNetwork/index.cjs +2 -2
- package/dist/components/AvatarNetwork/index.cjs.map +1 -1
- package/dist/components/AvatarNetwork/index.d.cts +1 -1
- package/dist/components/AvatarNetwork/index.d.cts.map +1 -1
- package/dist/components/AvatarNetwork/index.d.mts +1 -1
- package/dist/components/AvatarNetwork/index.d.mts.map +1 -1
- package/dist/components/AvatarNetwork/index.mjs +1 -1
- package/dist/components/AvatarNetwork/index.mjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.cjs +1 -2
- package/dist/components/BannerAlert/BannerAlert.cjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.cjs +8 -9
- package/dist/components/BannerAlert/BannerAlert.constants.cjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts +1 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts +1 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.mjs +1 -2
- package/dist/components/BannerAlert/BannerAlert.constants.mjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.mts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.mjs +1 -2
- package/dist/components/BannerAlert/BannerAlert.mjs.map +1 -1
- package/dist/components/Icon/Icon.cjs +2 -2
- package/dist/components/Icon/Icon.cjs.map +1 -1
- package/dist/components/Icon/Icon.constants.cjs +6 -6
- package/dist/components/Icon/Icon.constants.cjs.map +1 -1
- package/dist/components/Icon/Icon.constants.d.cts +1 -1
- package/dist/components/Icon/Icon.constants.d.cts.map +1 -1
- package/dist/components/Icon/Icon.constants.d.mts +1 -1
- package/dist/components/Icon/Icon.constants.d.mts.map +1 -1
- package/dist/components/Icon/Icon.constants.mjs +1 -1
- package/dist/components/Icon/Icon.constants.mjs.map +1 -1
- package/dist/components/Icon/Icon.d.cts.map +1 -1
- package/dist/components/Icon/Icon.d.mts.map +1 -1
- package/dist/components/Icon/Icon.mjs +1 -1
- package/dist/components/Icon/Icon.mjs.map +1 -1
- package/dist/components/Icon/index.cjs +4 -4
- package/dist/components/Icon/index.cjs.map +1 -1
- package/dist/components/Icon/index.d.cts +1 -1
- package/dist/components/Icon/index.d.cts.map +1 -1
- package/dist/components/Icon/index.d.mts +1 -1
- package/dist/components/Icon/index.d.mts.map +1 -1
- package/dist/components/Icon/index.mjs +1 -1
- package/dist/components/Icon/index.mjs.map +1 -1
- package/dist/components/Tag/Tag.cjs +51 -0
- package/dist/components/Tag/Tag.cjs.map +1 -0
- package/dist/components/Tag/Tag.constants.cjs +26 -0
- package/dist/components/Tag/Tag.constants.cjs.map +1 -0
- package/dist/components/Tag/Tag.constants.d.cts +5 -0
- package/dist/components/Tag/Tag.constants.d.cts.map +1 -0
- package/dist/components/Tag/Tag.constants.d.mts +5 -0
- package/dist/components/Tag/Tag.constants.d.mts.map +1 -0
- package/dist/components/Tag/Tag.constants.mjs +23 -0
- package/dist/components/Tag/Tag.constants.mjs.map +1 -0
- package/dist/components/Tag/Tag.d.cts +4 -0
- package/dist/components/Tag/Tag.d.cts.map +1 -0
- package/dist/components/Tag/Tag.d.mts +4 -0
- package/dist/components/Tag/Tag.d.mts.map +1 -0
- package/dist/components/Tag/Tag.mjs +32 -0
- package/dist/components/Tag/Tag.mjs.map +1 -0
- package/dist/components/Tag/Tag.types.cjs +3 -0
- package/dist/components/Tag/Tag.types.cjs.map +1 -0
- package/dist/components/Tag/Tag.types.d.cts +31 -0
- package/dist/components/Tag/Tag.types.d.cts.map +1 -0
- package/dist/components/Tag/Tag.types.d.mts +31 -0
- package/dist/components/Tag/Tag.types.d.mts.map +1 -0
- package/dist/components/Tag/Tag.types.mjs +2 -0
- package/dist/components/Tag/Tag.types.mjs.map +1 -0
- package/dist/components/Tag/index.cjs +8 -0
- package/dist/components/Tag/index.cjs.map +1 -0
- package/dist/components/Tag/index.d.cts +4 -0
- package/dist/components/Tag/index.d.cts.map +1 -0
- package/dist/components/Tag/index.d.mts +4 -0
- package/dist/components/Tag/index.d.mts.map +1 -0
- package/dist/components/Tag/index.mjs +3 -0
- package/dist/components/Tag/index.mjs.map +1 -0
- package/dist/components/TextButton/TextButton.cjs +7 -28
- package/dist/components/TextButton/TextButton.cjs.map +1 -1
- package/dist/components/TextButton/TextButton.d.cts.map +1 -1
- package/dist/components/TextButton/TextButton.d.mts.map +1 -1
- package/dist/components/TextButton/TextButton.mjs +7 -28
- package/dist/components/TextButton/TextButton.mjs.map +1 -1
- package/dist/components/TextButton/TextButton.types.cjs.map +1 -1
- package/dist/components/TextButton/TextButton.types.d.cts +9 -25
- package/dist/components/TextButton/TextButton.types.d.cts.map +1 -1
- package/dist/components/TextButton/TextButton.types.d.mts +9 -25
- package/dist/components/TextButton/TextButton.types.d.mts.map +1 -1
- package/dist/components/TextButton/TextButton.types.mjs.map +1 -1
- package/dist/components/TextButton/index.cjs +1 -3
- package/dist/components/TextButton/index.cjs.map +1 -1
- package/dist/components/TextButton/index.d.cts +0 -1
- package/dist/components/TextButton/index.d.cts.map +1 -1
- package/dist/components/TextButton/index.d.mts +0 -1
- package/dist/components/TextButton/index.d.mts.map +1 -1
- package/dist/components/TextButton/index.mjs +0 -1
- package/dist/components/TextButton/index.mjs.map +1 -1
- package/dist/components/Toast/Toast.cjs +73 -0
- package/dist/components/Toast/Toast.cjs.map +1 -0
- package/dist/components/Toast/Toast.constants.cjs +24 -0
- package/dist/components/Toast/Toast.constants.cjs.map +1 -0
- package/dist/components/Toast/Toast.constants.d.cts +16 -0
- package/dist/components/Toast/Toast.constants.d.cts.map +1 -0
- package/dist/components/Toast/Toast.constants.d.mts +16 -0
- package/dist/components/Toast/Toast.constants.d.mts.map +1 -0
- package/dist/components/Toast/Toast.constants.mjs +19 -0
- package/dist/components/Toast/Toast.constants.mjs.map +1 -0
- package/dist/components/Toast/Toast.d.cts +4 -0
- package/dist/components/Toast/Toast.d.cts.map +1 -0
- package/dist/components/Toast/Toast.d.mts +4 -0
- package/dist/components/Toast/Toast.d.mts.map +1 -0
- package/dist/components/Toast/Toast.mjs +54 -0
- package/dist/components/Toast/Toast.mjs.map +1 -0
- package/dist/components/Toast/Toast.types.cjs +3 -0
- package/dist/components/Toast/Toast.types.cjs.map +1 -0
- package/dist/components/Toast/Toast.types.d.cts +60 -0
- package/dist/components/Toast/Toast.types.d.cts.map +1 -0
- package/dist/components/Toast/Toast.types.d.mts +60 -0
- package/dist/components/Toast/Toast.types.d.mts.map +1 -0
- package/dist/components/Toast/Toast.types.mjs +2 -0
- package/dist/components/Toast/Toast.types.mjs.map +1 -0
- package/dist/components/Toast/Toaster.cjs +210 -0
- package/dist/components/Toast/Toaster.cjs.map +1 -0
- package/dist/components/Toast/Toaster.d.cts +11 -0
- package/dist/components/Toast/Toaster.d.cts.map +1 -0
- package/dist/components/Toast/Toaster.d.mts +11 -0
- package/dist/components/Toast/Toaster.d.mts.map +1 -0
- package/dist/components/Toast/Toaster.mjs +191 -0
- package/dist/components/Toast/Toaster.mjs.map +1 -0
- package/dist/components/Toast/index.cjs +11 -0
- package/dist/components/Toast/index.cjs.map +1 -0
- package/dist/components/Toast/index.d.cts +5 -0
- package/dist/components/Toast/index.d.cts.map +1 -0
- package/dist/components/Toast/index.d.mts +5 -0
- package/dist/components/Toast/index.d.mts.map +1 -0
- package/dist/components/Toast/index.mjs +4 -0
- package/dist/components/Toast/index.mjs.map +1 -0
- package/dist/components/index.cjs +10 -2
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +5 -1
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +5 -1
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +3 -1
- package/dist/components/index.mjs.map +1 -1
- package/dist/types/index.cjs +2 -23
- package/dist/types/index.cjs.map +1 -1
- package/dist/types/index.d.cts +1 -14
- package/dist/types/index.d.cts.map +1 -1
- package/dist/types/index.d.mts +1 -14
- package/dist/types/index.d.mts.map +1 -1
- package/dist/types/index.mjs +1 -15
- package/dist/types/index.mjs.map +1 -1
- package/package.json +3 -2
- package/dist/components/TextButton/TextButton.constants.cjs +0 -12
- package/dist/components/TextButton/TextButton.constants.cjs.map +0 -1
- package/dist/components/TextButton/TextButton.constants.d.cts +0 -4
- package/dist/components/TextButton/TextButton.constants.d.cts.map +0 -1
- package/dist/components/TextButton/TextButton.constants.d.mts +0 -4
- package/dist/components/TextButton/TextButton.constants.d.mts.map +0 -1
- package/dist/components/TextButton/TextButton.constants.mjs +0 -9
- package/dist/components/TextButton/TextButton.constants.mjs.map +0 -1
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.toast = exports.Toaster = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
29
|
+
const Toast_1 = require("./Toast.cjs");
|
|
30
|
+
const Toast_constants_1 = require("./Toast.constants.cjs");
|
|
31
|
+
let storeToastOptions;
|
|
32
|
+
const toastStoreListeners = new Set();
|
|
33
|
+
const normalizeToastOptions = (options) => ({
|
|
34
|
+
hasNoTimeout: false,
|
|
35
|
+
...options,
|
|
36
|
+
});
|
|
37
|
+
const emitToastStoreChange = () => {
|
|
38
|
+
toastStoreListeners.forEach((listener) => listener(storeToastOptions));
|
|
39
|
+
};
|
|
40
|
+
const setStoreToastOptions = (options) => {
|
|
41
|
+
storeToastOptions = normalizeToastOptions(options);
|
|
42
|
+
emitToastStoreChange();
|
|
43
|
+
};
|
|
44
|
+
const clearStoreToastOptions = () => {
|
|
45
|
+
storeToastOptions = undefined;
|
|
46
|
+
emitToastStoreChange();
|
|
47
|
+
};
|
|
48
|
+
const subscribeToToastStore = (listener) => {
|
|
49
|
+
toastStoreListeners.add(listener);
|
|
50
|
+
listener(storeToastOptions);
|
|
51
|
+
return () => {
|
|
52
|
+
toastStoreListeners.delete(listener);
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
const getToastProps = ({ hasNoTimeout: _hasNoTimeout, ...toastProps }) => toastProps;
|
|
56
|
+
const ToasterComponent = (0, react_1.forwardRef)(({ className, ...props }, ref) => {
|
|
57
|
+
const [toastOptions, setToastOptions] = (0, react_1.useState)(undefined);
|
|
58
|
+
const toastOptionsRef = (0, react_1.useRef)(undefined);
|
|
59
|
+
const [isVisible, setIsVisible] = (0, react_1.useState)(false);
|
|
60
|
+
const isVisibleRef = (0, react_1.useRef)(false);
|
|
61
|
+
const replacementTimerRef = (0, react_1.useRef)(null);
|
|
62
|
+
const autoDismissTimerRef = (0, react_1.useRef)(null);
|
|
63
|
+
const exitTimerRef = (0, react_1.useRef)(null);
|
|
64
|
+
const enterAnimationFrameRef = (0, react_1.useRef)(null);
|
|
65
|
+
const pendingToastRef = (0, react_1.useRef)(undefined);
|
|
66
|
+
const setCurrentToastOptions = (0, react_1.useCallback)((options) => {
|
|
67
|
+
toastOptionsRef.current = options;
|
|
68
|
+
setToastOptions(options);
|
|
69
|
+
}, []);
|
|
70
|
+
const setCurrentIsVisible = (0, react_1.useCallback)((nextIsVisible) => {
|
|
71
|
+
isVisibleRef.current = nextIsVisible;
|
|
72
|
+
setIsVisible(nextIsVisible);
|
|
73
|
+
}, []);
|
|
74
|
+
const clearPendingTimers = (0, react_1.useCallback)(() => {
|
|
75
|
+
if (replacementTimerRef.current !== null) {
|
|
76
|
+
clearTimeout(replacementTimerRef.current);
|
|
77
|
+
replacementTimerRef.current = null;
|
|
78
|
+
}
|
|
79
|
+
if (autoDismissTimerRef.current !== null) {
|
|
80
|
+
clearTimeout(autoDismissTimerRef.current);
|
|
81
|
+
autoDismissTimerRef.current = null;
|
|
82
|
+
}
|
|
83
|
+
if (exitTimerRef.current !== null) {
|
|
84
|
+
clearTimeout(exitTimerRef.current);
|
|
85
|
+
exitTimerRef.current = null;
|
|
86
|
+
}
|
|
87
|
+
if (enterAnimationFrameRef.current !== null) {
|
|
88
|
+
cancelAnimationFrame(enterAnimationFrameRef.current);
|
|
89
|
+
enterAnimationFrameRef.current = null;
|
|
90
|
+
}
|
|
91
|
+
}, []);
|
|
92
|
+
const closeRenderedToast = (0, react_1.useCallback)(() => {
|
|
93
|
+
if (!toastOptionsRef.current && !isVisibleRef.current) {
|
|
94
|
+
clearPendingTimers();
|
|
95
|
+
pendingToastRef.current = undefined;
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
clearPendingTimers();
|
|
99
|
+
pendingToastRef.current = undefined;
|
|
100
|
+
setCurrentIsVisible(false);
|
|
101
|
+
exitTimerRef.current = setTimeout(() => {
|
|
102
|
+
exitTimerRef.current = null;
|
|
103
|
+
setCurrentToastOptions(undefined);
|
|
104
|
+
}, Toast_constants_1.TOAST_ANIMATION_DURATION);
|
|
105
|
+
}, [clearPendingTimers, setCurrentIsVisible, setCurrentToastOptions]);
|
|
106
|
+
// Replace the currently mounted toast rather than queueing multiple toasts.
|
|
107
|
+
// This mirrors the old app-level toast service behavior while keeping the
|
|
108
|
+
// imperative API centered in the shared single-toast store.
|
|
109
|
+
const showRenderedToast = (0, react_1.useCallback)((options) => {
|
|
110
|
+
const normalizedOptions = normalizeToastOptions(options);
|
|
111
|
+
const timeoutDuration = 0;
|
|
112
|
+
if (toastOptionsRef.current) {
|
|
113
|
+
pendingToastRef.current = normalizedOptions;
|
|
114
|
+
setCurrentIsVisible(false);
|
|
115
|
+
if (exitTimerRef.current !== null) {
|
|
116
|
+
clearTimeout(exitTimerRef.current);
|
|
117
|
+
exitTimerRef.current = null;
|
|
118
|
+
}
|
|
119
|
+
exitTimerRef.current = setTimeout(() => {
|
|
120
|
+
exitTimerRef.current = null;
|
|
121
|
+
setCurrentToastOptions(pendingToastRef.current);
|
|
122
|
+
pendingToastRef.current = undefined;
|
|
123
|
+
}, Toast_constants_1.TOAST_ANIMATION_DURATION);
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
if (replacementTimerRef.current !== null) {
|
|
127
|
+
clearTimeout(replacementTimerRef.current);
|
|
128
|
+
}
|
|
129
|
+
replacementTimerRef.current = setTimeout(() => {
|
|
130
|
+
replacementTimerRef.current = null;
|
|
131
|
+
setCurrentToastOptions(normalizedOptions);
|
|
132
|
+
}, timeoutDuration);
|
|
133
|
+
}, [setCurrentIsVisible, setCurrentToastOptions]);
|
|
134
|
+
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
135
|
+
closeToast: clearStoreToastOptions,
|
|
136
|
+
showToast: setStoreToastOptions,
|
|
137
|
+
}), []);
|
|
138
|
+
// Subscribe before sibling passive effects run so toast() can be called
|
|
139
|
+
// from anywhere once the app root has rendered <Toaster />.
|
|
140
|
+
(0, react_1.useLayoutEffect)(() => {
|
|
141
|
+
return subscribeToToastStore((options) => {
|
|
142
|
+
if (options) {
|
|
143
|
+
showRenderedToast(options);
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
closeRenderedToast();
|
|
147
|
+
});
|
|
148
|
+
}, [closeRenderedToast, showRenderedToast]);
|
|
149
|
+
// Delay the enter transition until after mount so the DOM can paint the
|
|
150
|
+
// offscreen starting position before we slide the toast into view.
|
|
151
|
+
(0, react_1.useEffect)(() => {
|
|
152
|
+
if (toastOptions && !isVisible) {
|
|
153
|
+
enterAnimationFrameRef.current = requestAnimationFrame(() => {
|
|
154
|
+
enterAnimationFrameRef.current = requestAnimationFrame(() => {
|
|
155
|
+
setCurrentIsVisible(true);
|
|
156
|
+
enterAnimationFrameRef.current = null;
|
|
157
|
+
});
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
return () => {
|
|
161
|
+
clearPendingTimers();
|
|
162
|
+
};
|
|
163
|
+
}, [clearPendingTimers, setCurrentIsVisible, toastOptions]); // intentionally omit isVisible — only react to new toast options
|
|
164
|
+
// Auto-dismiss once the toast is visible, unless the caller requested a
|
|
165
|
+
// persistent toast.
|
|
166
|
+
(0, react_1.useEffect)(() => {
|
|
167
|
+
if (isVisible && toastOptions && !toastOptions.hasNoTimeout) {
|
|
168
|
+
autoDismissTimerRef.current = setTimeout(() => {
|
|
169
|
+
autoDismissTimerRef.current = null;
|
|
170
|
+
clearStoreToastOptions();
|
|
171
|
+
}, Toast_constants_1.TOAST_VISIBILITY_DURATION);
|
|
172
|
+
return () => {
|
|
173
|
+
clearPendingTimers();
|
|
174
|
+
};
|
|
175
|
+
}
|
|
176
|
+
return undefined;
|
|
177
|
+
}, [clearPendingTimers, isVisible, toastOptions]);
|
|
178
|
+
(0, react_1.useEffect)(() => {
|
|
179
|
+
return () => {
|
|
180
|
+
clearPendingTimers();
|
|
181
|
+
pendingToastRef.current = undefined;
|
|
182
|
+
toastOptionsRef.current = undefined;
|
|
183
|
+
isVisibleRef.current = false;
|
|
184
|
+
};
|
|
185
|
+
}, [clearPendingTimers]);
|
|
186
|
+
if (!toastOptions) {
|
|
187
|
+
return null;
|
|
188
|
+
}
|
|
189
|
+
const { onClose: toastOnClose, className: toastClassName, ...toastProps } = getToastProps(toastOptions);
|
|
190
|
+
return (react_1.default.createElement("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: (0, tw_merge_1.twMerge)('pointer-events-none fixed inset-x-4 bottom-4 z-[1000] flex justify-center', className), ...props },
|
|
191
|
+
react_1.default.createElement("div", { className: "pointer-events-auto w-full transition-transform ease-in-out", style: {
|
|
192
|
+
transitionDuration: `${Toast_constants_1.TOAST_ANIMATION_DURATION}ms`,
|
|
193
|
+
transform: isVisible
|
|
194
|
+
? 'translateY(0)'
|
|
195
|
+
: 'translateY(calc(100% + 16px))',
|
|
196
|
+
} },
|
|
197
|
+
react_1.default.createElement(Toast_1.Toast, { ...toastProps, className: toastClassName, onClose: () => {
|
|
198
|
+
clearStoreToastOptions();
|
|
199
|
+
toastOnClose?.();
|
|
200
|
+
} }))));
|
|
201
|
+
});
|
|
202
|
+
ToasterComponent.displayName = 'Toaster';
|
|
203
|
+
exports.Toaster = ToasterComponent;
|
|
204
|
+
exports.toast = ((options) => {
|
|
205
|
+
setStoreToastOptions(options);
|
|
206
|
+
});
|
|
207
|
+
exports.toast.dismiss = () => {
|
|
208
|
+
clearStoreToastOptions();
|
|
209
|
+
};
|
|
210
|
+
//# sourceMappingURL=Toaster.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toaster.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { Toast } from './Toast';\nimport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from './Toast.constants';\nimport type {\n ToastOptions,\n ToastProps,\n ToasterProps,\n ToasterRef,\n} from './Toast.types';\n\ntype ToastStoreListener = (options: ToastOptions | undefined) => void;\n\nlet storeToastOptions: ToastOptions | undefined;\nconst toastStoreListeners = new Set<ToastStoreListener>();\n\nconst normalizeToastOptions = (options: ToastOptions): ToastOptions => ({\n hasNoTimeout: false,\n ...options,\n});\n\nconst emitToastStoreChange = () => {\n toastStoreListeners.forEach((listener) => listener(storeToastOptions));\n};\n\nconst setStoreToastOptions = (options: ToastOptions) => {\n storeToastOptions = normalizeToastOptions(options);\n emitToastStoreChange();\n};\n\nconst clearStoreToastOptions = () => {\n storeToastOptions = undefined;\n emitToastStoreChange();\n};\n\nconst subscribeToToastStore = (listener: ToastStoreListener) => {\n toastStoreListeners.add(listener);\n listener(storeToastOptions);\n\n return () => {\n toastStoreListeners.delete(listener);\n };\n};\n\nconst getToastProps = ({\n hasNoTimeout: _hasNoTimeout,\n ...toastProps\n}: ToastOptions): ToastProps => toastProps;\n\nconst ToasterComponent = forwardRef<ToasterRef, ToasterProps>(\n ({ className, ...props }, ref) => {\n const [toastOptions, setToastOptions] = useState<ToastOptions | undefined>(\n undefined,\n );\n const toastOptionsRef = useRef<ToastOptions | undefined>(undefined);\n const [isVisible, setIsVisible] = useState(false);\n const isVisibleRef = useRef(false);\n const replacementTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const autoDismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const enterAnimationFrameRef = useRef<number | null>(null);\n const pendingToastRef = useRef<ToastOptions | undefined>(undefined);\n\n const setCurrentToastOptions = useCallback(\n (options: ToastOptions | undefined) => {\n toastOptionsRef.current = options;\n setToastOptions(options);\n },\n [],\n );\n\n const setCurrentIsVisible = useCallback((nextIsVisible: boolean) => {\n isVisibleRef.current = nextIsVisible;\n setIsVisible(nextIsVisible);\n }, []);\n\n const clearPendingTimers = useCallback(() => {\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n replacementTimerRef.current = null;\n }\n if (autoDismissTimerRef.current !== null) {\n clearTimeout(autoDismissTimerRef.current);\n autoDismissTimerRef.current = null;\n }\n if (exitTimerRef.current !== null) {\n clearTimeout(exitTimerRef.current);\n exitTimerRef.current = null;\n }\n if (enterAnimationFrameRef.current !== null) {\n cancelAnimationFrame(enterAnimationFrameRef.current);\n enterAnimationFrameRef.current = null;\n }\n }, []);\n\n const closeRenderedToast = useCallback(() => {\n if (!toastOptionsRef.current && !isVisibleRef.current) {\n clearPendingTimers();\n pendingToastRef.current = undefined;\n return;\n }\n\n clearPendingTimers();\n pendingToastRef.current = undefined;\n setCurrentIsVisible(false);\n exitTimerRef.current = setTimeout(() => {\n exitTimerRef.current = null;\n setCurrentToastOptions(undefined);\n }, TOAST_ANIMATION_DURATION);\n }, [clearPendingTimers, setCurrentIsVisible, setCurrentToastOptions]);\n\n // Replace the currently mounted toast rather than queueing multiple toasts.\n // This mirrors the old app-level toast service behavior while keeping the\n // imperative API centered in the shared single-toast store.\n const showRenderedToast = useCallback(\n (options: ToastOptions) => {\n const normalizedOptions = normalizeToastOptions(options);\n const timeoutDuration = 0;\n\n if (toastOptionsRef.current) {\n pendingToastRef.current = normalizedOptions;\n setCurrentIsVisible(false);\n if (exitTimerRef.current !== null) {\n clearTimeout(exitTimerRef.current);\n exitTimerRef.current = null;\n }\n exitTimerRef.current = setTimeout(() => {\n exitTimerRef.current = null;\n setCurrentToastOptions(pendingToastRef.current);\n pendingToastRef.current = undefined;\n }, TOAST_ANIMATION_DURATION);\n return;\n }\n\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n }\n\n replacementTimerRef.current = setTimeout(() => {\n replacementTimerRef.current = null;\n setCurrentToastOptions(normalizedOptions);\n }, timeoutDuration);\n },\n [setCurrentIsVisible, setCurrentToastOptions],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n closeToast: clearStoreToastOptions,\n showToast: setStoreToastOptions,\n }),\n [],\n );\n\n // Subscribe before sibling passive effects run so toast() can be called\n // from anywhere once the app root has rendered <Toaster />.\n useLayoutEffect(() => {\n return subscribeToToastStore((options) => {\n if (options) {\n showRenderedToast(options);\n return;\n }\n\n closeRenderedToast();\n });\n }, [closeRenderedToast, showRenderedToast]);\n\n // Delay the enter transition until after mount so the DOM can paint the\n // offscreen starting position before we slide the toast into view.\n useEffect(() => {\n if (toastOptions && !isVisible) {\n enterAnimationFrameRef.current = requestAnimationFrame(() => {\n enterAnimationFrameRef.current = requestAnimationFrame(() => {\n setCurrentIsVisible(true);\n enterAnimationFrameRef.current = null;\n });\n });\n }\n return () => {\n clearPendingTimers();\n };\n }, [clearPendingTimers, setCurrentIsVisible, toastOptions]); // intentionally omit isVisible — only react to new toast options\n\n // Auto-dismiss once the toast is visible, unless the caller requested a\n // persistent toast.\n useEffect(() => {\n if (isVisible && toastOptions && !toastOptions.hasNoTimeout) {\n autoDismissTimerRef.current = setTimeout(() => {\n autoDismissTimerRef.current = null;\n clearStoreToastOptions();\n }, TOAST_VISIBILITY_DURATION);\n return () => {\n clearPendingTimers();\n };\n }\n return undefined;\n }, [clearPendingTimers, isVisible, toastOptions]);\n\n useEffect(() => {\n return () => {\n clearPendingTimers();\n pendingToastRef.current = undefined;\n toastOptionsRef.current = undefined;\n isVisibleRef.current = false;\n };\n }, [clearPendingTimers]);\n\n if (!toastOptions) {\n return null;\n }\n\n const {\n onClose: toastOnClose,\n className: toastClassName,\n ...toastProps\n } = getToastProps(toastOptions);\n\n return (\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className={twMerge(\n 'pointer-events-none fixed inset-x-4 bottom-4 z-[1000] flex justify-center',\n className,\n )}\n {...props}\n >\n <div\n className=\"pointer-events-auto w-full transition-transform ease-in-out\"\n style={{\n transitionDuration: `${TOAST_ANIMATION_DURATION}ms`,\n transform: isVisible\n ? 'translateY(0)'\n : 'translateY(calc(100% + 16px))',\n }}\n >\n <Toast\n {...toastProps}\n className={toastClassName}\n onClose={() => {\n clearStoreToastOptions();\n toastOnClose?.();\n }}\n />\n </div>\n </div>\n );\n },\n);\n\nToasterComponent.displayName = 'Toaster';\n\ntype ToastFunction = ((options: ToastOptions) => void) & {\n dismiss: () => void;\n};\n\nexport const Toaster = ToasterComponent;\n\nexport const toast = ((options: ToastOptions) => {\n setStoreToastOptions(options);\n}) as ToastFunction;\n\ntoast.dismiss = () => {\n clearStoreToastOptions();\n};\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ToastOptions, ToasterRef } from "./Toast.types.cjs";
|
|
3
|
+
type ToastFunction = ((options: ToastOptions) => void) & {
|
|
4
|
+
dismiss: () => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const Toaster: React.ForwardRefExoticComponent<{
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & React.RefAttributes<ToasterRef>>;
|
|
9
|
+
export declare const toast: ToastFunction;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=Toaster.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toaster.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,cAAc;AASf,OAAO,KAAK,EACV,YAAY,EAGZ,UAAU,EACX,0BAAsB;AAyPvB,KAAK,aAAa,GAAG,CAAC,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG;IACvD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,OAAO;;0FAAmB,CAAC;AAExC,eAAO,MAAM,KAAK,eAEC,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ToastOptions, ToasterRef } from "./Toast.types.mjs";
|
|
3
|
+
type ToastFunction = ((options: ToastOptions) => void) & {
|
|
4
|
+
dismiss: () => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const Toaster: React.ForwardRefExoticComponent<{
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & React.RefAttributes<ToasterRef>>;
|
|
9
|
+
export declare const toast: ToastFunction;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=Toaster.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toaster.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,cAAc;AASf,OAAO,KAAK,EACV,YAAY,EAGZ,UAAU,EACX,0BAAsB;AAyPvB,KAAK,aAAa,GAAG,CAAC,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG;IACvD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,OAAO;;0FAAmB,CAAC;AAExC,eAAO,MAAM,KAAK,eAEC,CAAC"}
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
function $importDefault(module) {
|
|
2
|
+
if (module?.__esModule) {
|
|
3
|
+
return module.default;
|
|
4
|
+
}
|
|
5
|
+
return module;
|
|
6
|
+
}
|
|
7
|
+
import $React, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
|
|
8
|
+
const React = $importDefault($React);
|
|
9
|
+
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
10
|
+
import { Toast } from "./Toast.mjs";
|
|
11
|
+
import { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION } from "./Toast.constants.mjs";
|
|
12
|
+
let storeToastOptions;
|
|
13
|
+
const toastStoreListeners = new Set();
|
|
14
|
+
const normalizeToastOptions = (options) => ({
|
|
15
|
+
hasNoTimeout: false,
|
|
16
|
+
...options,
|
|
17
|
+
});
|
|
18
|
+
const emitToastStoreChange = () => {
|
|
19
|
+
toastStoreListeners.forEach((listener) => listener(storeToastOptions));
|
|
20
|
+
};
|
|
21
|
+
const setStoreToastOptions = (options) => {
|
|
22
|
+
storeToastOptions = normalizeToastOptions(options);
|
|
23
|
+
emitToastStoreChange();
|
|
24
|
+
};
|
|
25
|
+
const clearStoreToastOptions = () => {
|
|
26
|
+
storeToastOptions = undefined;
|
|
27
|
+
emitToastStoreChange();
|
|
28
|
+
};
|
|
29
|
+
const subscribeToToastStore = (listener) => {
|
|
30
|
+
toastStoreListeners.add(listener);
|
|
31
|
+
listener(storeToastOptions);
|
|
32
|
+
return () => {
|
|
33
|
+
toastStoreListeners.delete(listener);
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
const getToastProps = ({ hasNoTimeout: _hasNoTimeout, ...toastProps }) => toastProps;
|
|
37
|
+
const ToasterComponent = forwardRef(({ className, ...props }, ref) => {
|
|
38
|
+
const [toastOptions, setToastOptions] = useState(undefined);
|
|
39
|
+
const toastOptionsRef = useRef(undefined);
|
|
40
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
41
|
+
const isVisibleRef = useRef(false);
|
|
42
|
+
const replacementTimerRef = useRef(null);
|
|
43
|
+
const autoDismissTimerRef = useRef(null);
|
|
44
|
+
const exitTimerRef = useRef(null);
|
|
45
|
+
const enterAnimationFrameRef = useRef(null);
|
|
46
|
+
const pendingToastRef = useRef(undefined);
|
|
47
|
+
const setCurrentToastOptions = useCallback((options) => {
|
|
48
|
+
toastOptionsRef.current = options;
|
|
49
|
+
setToastOptions(options);
|
|
50
|
+
}, []);
|
|
51
|
+
const setCurrentIsVisible = useCallback((nextIsVisible) => {
|
|
52
|
+
isVisibleRef.current = nextIsVisible;
|
|
53
|
+
setIsVisible(nextIsVisible);
|
|
54
|
+
}, []);
|
|
55
|
+
const clearPendingTimers = useCallback(() => {
|
|
56
|
+
if (replacementTimerRef.current !== null) {
|
|
57
|
+
clearTimeout(replacementTimerRef.current);
|
|
58
|
+
replacementTimerRef.current = null;
|
|
59
|
+
}
|
|
60
|
+
if (autoDismissTimerRef.current !== null) {
|
|
61
|
+
clearTimeout(autoDismissTimerRef.current);
|
|
62
|
+
autoDismissTimerRef.current = null;
|
|
63
|
+
}
|
|
64
|
+
if (exitTimerRef.current !== null) {
|
|
65
|
+
clearTimeout(exitTimerRef.current);
|
|
66
|
+
exitTimerRef.current = null;
|
|
67
|
+
}
|
|
68
|
+
if (enterAnimationFrameRef.current !== null) {
|
|
69
|
+
cancelAnimationFrame(enterAnimationFrameRef.current);
|
|
70
|
+
enterAnimationFrameRef.current = null;
|
|
71
|
+
}
|
|
72
|
+
}, []);
|
|
73
|
+
const closeRenderedToast = useCallback(() => {
|
|
74
|
+
if (!toastOptionsRef.current && !isVisibleRef.current) {
|
|
75
|
+
clearPendingTimers();
|
|
76
|
+
pendingToastRef.current = undefined;
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
clearPendingTimers();
|
|
80
|
+
pendingToastRef.current = undefined;
|
|
81
|
+
setCurrentIsVisible(false);
|
|
82
|
+
exitTimerRef.current = setTimeout(() => {
|
|
83
|
+
exitTimerRef.current = null;
|
|
84
|
+
setCurrentToastOptions(undefined);
|
|
85
|
+
}, TOAST_ANIMATION_DURATION);
|
|
86
|
+
}, [clearPendingTimers, setCurrentIsVisible, setCurrentToastOptions]);
|
|
87
|
+
// Replace the currently mounted toast rather than queueing multiple toasts.
|
|
88
|
+
// This mirrors the old app-level toast service behavior while keeping the
|
|
89
|
+
// imperative API centered in the shared single-toast store.
|
|
90
|
+
const showRenderedToast = useCallback((options) => {
|
|
91
|
+
const normalizedOptions = normalizeToastOptions(options);
|
|
92
|
+
const timeoutDuration = 0;
|
|
93
|
+
if (toastOptionsRef.current) {
|
|
94
|
+
pendingToastRef.current = normalizedOptions;
|
|
95
|
+
setCurrentIsVisible(false);
|
|
96
|
+
if (exitTimerRef.current !== null) {
|
|
97
|
+
clearTimeout(exitTimerRef.current);
|
|
98
|
+
exitTimerRef.current = null;
|
|
99
|
+
}
|
|
100
|
+
exitTimerRef.current = setTimeout(() => {
|
|
101
|
+
exitTimerRef.current = null;
|
|
102
|
+
setCurrentToastOptions(pendingToastRef.current);
|
|
103
|
+
pendingToastRef.current = undefined;
|
|
104
|
+
}, TOAST_ANIMATION_DURATION);
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
if (replacementTimerRef.current !== null) {
|
|
108
|
+
clearTimeout(replacementTimerRef.current);
|
|
109
|
+
}
|
|
110
|
+
replacementTimerRef.current = setTimeout(() => {
|
|
111
|
+
replacementTimerRef.current = null;
|
|
112
|
+
setCurrentToastOptions(normalizedOptions);
|
|
113
|
+
}, timeoutDuration);
|
|
114
|
+
}, [setCurrentIsVisible, setCurrentToastOptions]);
|
|
115
|
+
useImperativeHandle(ref, () => ({
|
|
116
|
+
closeToast: clearStoreToastOptions,
|
|
117
|
+
showToast: setStoreToastOptions,
|
|
118
|
+
}), []);
|
|
119
|
+
// Subscribe before sibling passive effects run so toast() can be called
|
|
120
|
+
// from anywhere once the app root has rendered <Toaster />.
|
|
121
|
+
useLayoutEffect(() => {
|
|
122
|
+
return subscribeToToastStore((options) => {
|
|
123
|
+
if (options) {
|
|
124
|
+
showRenderedToast(options);
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
closeRenderedToast();
|
|
128
|
+
});
|
|
129
|
+
}, [closeRenderedToast, showRenderedToast]);
|
|
130
|
+
// Delay the enter transition until after mount so the DOM can paint the
|
|
131
|
+
// offscreen starting position before we slide the toast into view.
|
|
132
|
+
useEffect(() => {
|
|
133
|
+
if (toastOptions && !isVisible) {
|
|
134
|
+
enterAnimationFrameRef.current = requestAnimationFrame(() => {
|
|
135
|
+
enterAnimationFrameRef.current = requestAnimationFrame(() => {
|
|
136
|
+
setCurrentIsVisible(true);
|
|
137
|
+
enterAnimationFrameRef.current = null;
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
return () => {
|
|
142
|
+
clearPendingTimers();
|
|
143
|
+
};
|
|
144
|
+
}, [clearPendingTimers, setCurrentIsVisible, toastOptions]); // intentionally omit isVisible — only react to new toast options
|
|
145
|
+
// Auto-dismiss once the toast is visible, unless the caller requested a
|
|
146
|
+
// persistent toast.
|
|
147
|
+
useEffect(() => {
|
|
148
|
+
if (isVisible && toastOptions && !toastOptions.hasNoTimeout) {
|
|
149
|
+
autoDismissTimerRef.current = setTimeout(() => {
|
|
150
|
+
autoDismissTimerRef.current = null;
|
|
151
|
+
clearStoreToastOptions();
|
|
152
|
+
}, TOAST_VISIBILITY_DURATION);
|
|
153
|
+
return () => {
|
|
154
|
+
clearPendingTimers();
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
return undefined;
|
|
158
|
+
}, [clearPendingTimers, isVisible, toastOptions]);
|
|
159
|
+
useEffect(() => {
|
|
160
|
+
return () => {
|
|
161
|
+
clearPendingTimers();
|
|
162
|
+
pendingToastRef.current = undefined;
|
|
163
|
+
toastOptionsRef.current = undefined;
|
|
164
|
+
isVisibleRef.current = false;
|
|
165
|
+
};
|
|
166
|
+
}, [clearPendingTimers]);
|
|
167
|
+
if (!toastOptions) {
|
|
168
|
+
return null;
|
|
169
|
+
}
|
|
170
|
+
const { onClose: toastOnClose, className: toastClassName, ...toastProps } = getToastProps(toastOptions);
|
|
171
|
+
return (React.createElement("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: twMerge('pointer-events-none fixed inset-x-4 bottom-4 z-[1000] flex justify-center', className), ...props },
|
|
172
|
+
React.createElement("div", { className: "pointer-events-auto w-full transition-transform ease-in-out", style: {
|
|
173
|
+
transitionDuration: `${TOAST_ANIMATION_DURATION}ms`,
|
|
174
|
+
transform: isVisible
|
|
175
|
+
? 'translateY(0)'
|
|
176
|
+
: 'translateY(calc(100% + 16px))',
|
|
177
|
+
} },
|
|
178
|
+
React.createElement(Toast, { ...toastProps, className: toastClassName, onClose: () => {
|
|
179
|
+
clearStoreToastOptions();
|
|
180
|
+
toastOnClose?.();
|
|
181
|
+
} }))));
|
|
182
|
+
});
|
|
183
|
+
ToasterComponent.displayName = 'Toaster';
|
|
184
|
+
export const Toaster = ToasterComponent;
|
|
185
|
+
export const toast = ((options) => {
|
|
186
|
+
setStoreToastOptions(options);
|
|
187
|
+
});
|
|
188
|
+
toast.dismiss = () => {
|
|
189
|
+
clearStoreToastOptions();
|
|
190
|
+
};
|
|
191
|
+
//# sourceMappingURL=Toaster.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toaster.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { Toast } from './Toast';\nimport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from './Toast.constants';\nimport type {\n ToastOptions,\n ToastProps,\n ToasterProps,\n ToasterRef,\n} from './Toast.types';\n\ntype ToastStoreListener = (options: ToastOptions | undefined) => void;\n\nlet storeToastOptions: ToastOptions | undefined;\nconst toastStoreListeners = new Set<ToastStoreListener>();\n\nconst normalizeToastOptions = (options: ToastOptions): ToastOptions => ({\n hasNoTimeout: false,\n ...options,\n});\n\nconst emitToastStoreChange = () => {\n toastStoreListeners.forEach((listener) => listener(storeToastOptions));\n};\n\nconst setStoreToastOptions = (options: ToastOptions) => {\n storeToastOptions = normalizeToastOptions(options);\n emitToastStoreChange();\n};\n\nconst clearStoreToastOptions = () => {\n storeToastOptions = undefined;\n emitToastStoreChange();\n};\n\nconst subscribeToToastStore = (listener: ToastStoreListener) => {\n toastStoreListeners.add(listener);\n listener(storeToastOptions);\n\n return () => {\n toastStoreListeners.delete(listener);\n };\n};\n\nconst getToastProps = ({\n hasNoTimeout: _hasNoTimeout,\n ...toastProps\n}: ToastOptions): ToastProps => toastProps;\n\nconst ToasterComponent = forwardRef<ToasterRef, ToasterProps>(\n ({ className, ...props }, ref) => {\n const [toastOptions, setToastOptions] = useState<ToastOptions | undefined>(\n undefined,\n );\n const toastOptionsRef = useRef<ToastOptions | undefined>(undefined);\n const [isVisible, setIsVisible] = useState(false);\n const isVisibleRef = useRef(false);\n const replacementTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const autoDismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const enterAnimationFrameRef = useRef<number | null>(null);\n const pendingToastRef = useRef<ToastOptions | undefined>(undefined);\n\n const setCurrentToastOptions = useCallback(\n (options: ToastOptions | undefined) => {\n toastOptionsRef.current = options;\n setToastOptions(options);\n },\n [],\n );\n\n const setCurrentIsVisible = useCallback((nextIsVisible: boolean) => {\n isVisibleRef.current = nextIsVisible;\n setIsVisible(nextIsVisible);\n }, []);\n\n const clearPendingTimers = useCallback(() => {\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n replacementTimerRef.current = null;\n }\n if (autoDismissTimerRef.current !== null) {\n clearTimeout(autoDismissTimerRef.current);\n autoDismissTimerRef.current = null;\n }\n if (exitTimerRef.current !== null) {\n clearTimeout(exitTimerRef.current);\n exitTimerRef.current = null;\n }\n if (enterAnimationFrameRef.current !== null) {\n cancelAnimationFrame(enterAnimationFrameRef.current);\n enterAnimationFrameRef.current = null;\n }\n }, []);\n\n const closeRenderedToast = useCallback(() => {\n if (!toastOptionsRef.current && !isVisibleRef.current) {\n clearPendingTimers();\n pendingToastRef.current = undefined;\n return;\n }\n\n clearPendingTimers();\n pendingToastRef.current = undefined;\n setCurrentIsVisible(false);\n exitTimerRef.current = setTimeout(() => {\n exitTimerRef.current = null;\n setCurrentToastOptions(undefined);\n }, TOAST_ANIMATION_DURATION);\n }, [clearPendingTimers, setCurrentIsVisible, setCurrentToastOptions]);\n\n // Replace the currently mounted toast rather than queueing multiple toasts.\n // This mirrors the old app-level toast service behavior while keeping the\n // imperative API centered in the shared single-toast store.\n const showRenderedToast = useCallback(\n (options: ToastOptions) => {\n const normalizedOptions = normalizeToastOptions(options);\n const timeoutDuration = 0;\n\n if (toastOptionsRef.current) {\n pendingToastRef.current = normalizedOptions;\n setCurrentIsVisible(false);\n if (exitTimerRef.current !== null) {\n clearTimeout(exitTimerRef.current);\n exitTimerRef.current = null;\n }\n exitTimerRef.current = setTimeout(() => {\n exitTimerRef.current = null;\n setCurrentToastOptions(pendingToastRef.current);\n pendingToastRef.current = undefined;\n }, TOAST_ANIMATION_DURATION);\n return;\n }\n\n if (replacementTimerRef.current !== null) {\n clearTimeout(replacementTimerRef.current);\n }\n\n replacementTimerRef.current = setTimeout(() => {\n replacementTimerRef.current = null;\n setCurrentToastOptions(normalizedOptions);\n }, timeoutDuration);\n },\n [setCurrentIsVisible, setCurrentToastOptions],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n closeToast: clearStoreToastOptions,\n showToast: setStoreToastOptions,\n }),\n [],\n );\n\n // Subscribe before sibling passive effects run so toast() can be called\n // from anywhere once the app root has rendered <Toaster />.\n useLayoutEffect(() => {\n return subscribeToToastStore((options) => {\n if (options) {\n showRenderedToast(options);\n return;\n }\n\n closeRenderedToast();\n });\n }, [closeRenderedToast, showRenderedToast]);\n\n // Delay the enter transition until after mount so the DOM can paint the\n // offscreen starting position before we slide the toast into view.\n useEffect(() => {\n if (toastOptions && !isVisible) {\n enterAnimationFrameRef.current = requestAnimationFrame(() => {\n enterAnimationFrameRef.current = requestAnimationFrame(() => {\n setCurrentIsVisible(true);\n enterAnimationFrameRef.current = null;\n });\n });\n }\n return () => {\n clearPendingTimers();\n };\n }, [clearPendingTimers, setCurrentIsVisible, toastOptions]); // intentionally omit isVisible — only react to new toast options\n\n // Auto-dismiss once the toast is visible, unless the caller requested a\n // persistent toast.\n useEffect(() => {\n if (isVisible && toastOptions && !toastOptions.hasNoTimeout) {\n autoDismissTimerRef.current = setTimeout(() => {\n autoDismissTimerRef.current = null;\n clearStoreToastOptions();\n }, TOAST_VISIBILITY_DURATION);\n return () => {\n clearPendingTimers();\n };\n }\n return undefined;\n }, [clearPendingTimers, isVisible, toastOptions]);\n\n useEffect(() => {\n return () => {\n clearPendingTimers();\n pendingToastRef.current = undefined;\n toastOptionsRef.current = undefined;\n isVisibleRef.current = false;\n };\n }, [clearPendingTimers]);\n\n if (!toastOptions) {\n return null;\n }\n\n const {\n onClose: toastOnClose,\n className: toastClassName,\n ...toastProps\n } = getToastProps(toastOptions);\n\n return (\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className={twMerge(\n 'pointer-events-none fixed inset-x-4 bottom-4 z-[1000] flex justify-center',\n className,\n )}\n {...props}\n >\n <div\n className=\"pointer-events-auto w-full transition-transform ease-in-out\"\n style={{\n transitionDuration: `${TOAST_ANIMATION_DURATION}ms`,\n transform: isVisible\n ? 'translateY(0)'\n : 'translateY(calc(100% + 16px))',\n }}\n >\n <Toast\n {...toastProps}\n className={toastClassName}\n onClose={() => {\n clearStoreToastOptions();\n toastOnClose?.();\n }}\n />\n </div>\n </div>\n );\n },\n);\n\nToasterComponent.displayName = 'Toaster';\n\ntype ToastFunction = ((options: ToastOptions) => void) & {\n dismiss: () => void;\n};\n\nexport const Toaster = ToasterComponent;\n\nexport const toast = ((options: ToastOptions) => {\n setStoreToastOptions(options);\n}) as ToastFunction;\n\ntoast.dismiss = () => {\n clearStoreToastOptions();\n};\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.toast = exports.Toaster = exports.Toast = exports.ToastSeverity = void 0;
|
|
4
|
+
var design_system_shared_1 = require("@metamask/design-system-shared");
|
|
5
|
+
Object.defineProperty(exports, "ToastSeverity", { enumerable: true, get: function () { return design_system_shared_1.ToastSeverity; } });
|
|
6
|
+
var Toast_1 = require("./Toast.cjs");
|
|
7
|
+
Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
|
|
8
|
+
var Toaster_1 = require("./Toaster.cjs");
|
|
9
|
+
Object.defineProperty(exports, "Toaster", { enumerable: true, get: function () { return Toaster_1.Toaster; } });
|
|
10
|
+
Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return Toaster_1.toast; } });
|
|
11
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":";;;AAAA,uEAA+D;AAAtD,qHAAA,aAAa,OAAA;AACtB,qCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,yCAA2C;AAAlC,kGAAA,OAAO,OAAA;AAAE,gGAAA,KAAK,OAAA","sourcesContent":["export { ToastSeverity } from '@metamask/design-system-shared';\nexport { Toast } from './Toast';\nexport { Toaster, toast } from './Toaster';\nexport type { ToastOptions, ToastProps, ToasterProps } from './Toast.types';\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { ToastSeverity } from "@metamask/design-system-shared";
|
|
2
|
+
export { Toast } from "./Toast.cjs";
|
|
3
|
+
export { Toaster, toast } from "./Toaster.cjs";
|
|
4
|
+
export type { ToastOptions, ToastProps, ToasterProps } from "./Toast.types.cjs";
|
|
5
|
+
//# sourceMappingURL=index.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,uCAAuC;AAC/D,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,sBAAkB;AAC3C,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,0BAAsB"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { ToastSeverity } from "@metamask/design-system-shared";
|
|
2
|
+
export { Toast } from "./Toast.mjs";
|
|
3
|
+
export { Toaster, toast } from "./Toaster.mjs";
|
|
4
|
+
export type { ToastOptions, ToastProps, ToasterProps } from "./Toast.types.mjs";
|
|
5
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,uCAAuC;AAC/D,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,sBAAkB;AAC3C,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,0BAAsB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,uCAAuC;AAC/D,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,sBAAkB","sourcesContent":["export { ToastSeverity } from '@metamask/design-system-shared';\nexport { Toast } from './Toast';\nexport { Toaster, toast } from './Toaster';\nexport type { ToastOptions, ToastProps, ToasterProps } from './Toast.types';\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Icon = exports.HelpTextSeverity = exports.HelpText = exports.HeaderBase = exports.Checkbox = exports.ButtonIconVariant = exports.ButtonIconSize = exports.ButtonIcon = exports.ButtonBaseSize = exports.ButtonBase = exports.ButtonVariant = exports.ButtonSize = exports.Button = exports.Box = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = exports.Blockies = exports.BannerBase = exports.BadgeWrapperPositionAnchorShape = exports.BadgeWrapperPosition = exports.BadgeWrapper = exports.BadgeStatusSize = exports.BadgeStatusStatus = exports.BadgeStatus = exports.BadgeNetwork = exports.BadgeIcon = exports.BadgeCountSize = exports.BadgeCount = exports.AvatarTokenSize = exports.AvatarToken = exports.AvatarNetworkSize = exports.AvatarNetwork = exports.AvatarIconSeverity = exports.AvatarIconSize = exports.AvatarIcon = exports.AvatarGroupVariant = exports.AvatarGroupSize = exports.AvatarGroup = exports.AvatarFaviconSize = exports.AvatarFavicon = exports.AvatarBaseShape = exports.AvatarBaseSize = exports.AvatarBase = exports.AvatarAccountVariant = exports.AvatarAccountSize = exports.AvatarAccount = void 0;
|
|
4
|
-
exports.ButtonFilter = exports.ButtonHeroSize = exports.ButtonHero = exports.BannerAlertSeverity = exports.BannerAlert = exports.TextFieldSearch = exports.FormTextField = exports.TextFieldType = exports.TextFieldSize = exports.TextField = exports.
|
|
4
|
+
exports.Toast = exports.ButtonFilter = exports.ButtonHeroSize = exports.ButtonHero = exports.TagSeverity = exports.Tag = exports.BannerAlertSeverity = exports.BannerAlert = exports.TextFieldSearch = exports.FormTextField = exports.TextFieldType = exports.TextFieldSize = exports.TextField = exports.TextButton = exports.TextAreaResize = exports.TextArea = exports.OverflowWrap = exports.TextTransform = exports.FontStyle = exports.FontFamily = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.Text = exports.PopoverRole = exports.PopoverPosition = exports.Popover = exports.PopoverHeader = exports.SensitiveTextLength = exports.SensitiveText = exports.Skeleton = exports.MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR = exports.ModalContentSize = exports.ModalContent = exports.useModalContext = exports.Modal = exports.ModalHeader = exports.ModalFooter = exports.ButtonsAlignment = exports.ModalFocus = exports.ModalBody = exports.ModalOverlay = exports.Maskicon = exports.Label = exports.Jazzicon = exports.Input = exports.IconColor = exports.IconSize = exports.IconName = void 0;
|
|
5
|
+
exports.ToastSeverity = exports.toast = exports.Toaster = void 0;
|
|
5
6
|
var AvatarAccount_1 = require("./AvatarAccount/index.cjs");
|
|
6
7
|
Object.defineProperty(exports, "AvatarAccount", { enumerable: true, get: function () { return AvatarAccount_1.AvatarAccount; } });
|
|
7
8
|
Object.defineProperty(exports, "AvatarAccountSize", { enumerable: true, get: function () { return AvatarAccount_1.AvatarAccountSize; } });
|
|
@@ -135,7 +136,6 @@ Object.defineProperty(exports, "TextArea", { enumerable: true, get: function ()
|
|
|
135
136
|
Object.defineProperty(exports, "TextAreaResize", { enumerable: true, get: function () { return TextArea_1.TextAreaResize; } });
|
|
136
137
|
var TextButton_1 = require("./TextButton/index.cjs");
|
|
137
138
|
Object.defineProperty(exports, "TextButton", { enumerable: true, get: function () { return TextButton_1.TextButton; } });
|
|
138
|
-
Object.defineProperty(exports, "TextButtonSize", { enumerable: true, get: function () { return TextButton_1.TextButtonSize; } });
|
|
139
139
|
var TextField_1 = require("./TextField/index.cjs");
|
|
140
140
|
Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });
|
|
141
141
|
Object.defineProperty(exports, "TextFieldSize", { enumerable: true, get: function () { return TextField_1.TextFieldSize; } });
|
|
@@ -147,9 +147,17 @@ Object.defineProperty(exports, "TextFieldSearch", { enumerable: true, get: funct
|
|
|
147
147
|
var BannerAlert_1 = require("./BannerAlert/index.cjs");
|
|
148
148
|
Object.defineProperty(exports, "BannerAlert", { enumerable: true, get: function () { return BannerAlert_1.BannerAlert; } });
|
|
149
149
|
Object.defineProperty(exports, "BannerAlertSeverity", { enumerable: true, get: function () { return BannerAlert_1.BannerAlertSeverity; } });
|
|
150
|
+
var Tag_1 = require("./Tag/index.cjs");
|
|
151
|
+
Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
|
|
152
|
+
Object.defineProperty(exports, "TagSeverity", { enumerable: true, get: function () { return Tag_1.TagSeverity; } });
|
|
150
153
|
var ButtonHero_1 = require("./ButtonHero/index.cjs");
|
|
151
154
|
Object.defineProperty(exports, "ButtonHero", { enumerable: true, get: function () { return ButtonHero_1.ButtonHero; } });
|
|
152
155
|
Object.defineProperty(exports, "ButtonHeroSize", { enumerable: true, get: function () { return ButtonHero_1.ButtonHeroSize; } });
|
|
153
156
|
var ButtonFilter_1 = require("./ButtonFilter/index.cjs");
|
|
154
157
|
Object.defineProperty(exports, "ButtonFilter", { enumerable: true, get: function () { return ButtonFilter_1.ButtonFilter; } });
|
|
158
|
+
var Toast_1 = require("./Toast/index.cjs");
|
|
159
|
+
Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
|
|
160
|
+
Object.defineProperty(exports, "Toaster", { enumerable: true, get: function () { return Toast_1.Toaster; } });
|
|
161
|
+
Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return Toast_1.toast; } });
|
|
162
|
+
Object.defineProperty(exports, "ToastSeverity", { enumerable: true, get: function () { return Toast_1.ToastSeverity; } });
|
|
155
163
|
//# sourceMappingURL=index.cjs.map
|