@a-type/ui 3.0.44 → 3.1.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/provider/Provider.js +2 -2
- package/dist/cjs/components/provider/Provider.js.map +1 -1
- package/dist/cjs/components/toasts/toasts.d.ts +36 -5
- package/dist/cjs/components/toasts/toasts.js +106 -35
- package/dist/cjs/components/toasts/toasts.js.map +1 -1
- package/dist/cjs/components/toasts/toasts.stories.js +44 -13
- package/dist/cjs/components/toasts/toasts.stories.js.map +1 -1
- package/dist/css/main.css +3 -4
- package/dist/esm/components/provider/Provider.js +3 -3
- package/dist/esm/components/provider/Provider.js.map +1 -1
- package/dist/esm/components/toasts/toasts.d.ts +36 -5
- package/dist/esm/components/toasts/toasts.js +103 -32
- package/dist/esm/components/toasts/toasts.js.map +1 -1
- package/dist/esm/components/toasts/toasts.stories.js +40 -9
- package/dist/esm/components/toasts/toasts.stories.js.map +1 -1
- package/package.json +3 -2
- package/src/components/provider/Provider.tsx +15 -11
- package/src/components/toasts/toasts.stories.tsx +50 -8
- package/src/components/toasts/toasts.tsx +264 -67
|
@@ -25,8 +25,8 @@ function Provider({ children, disableParticles, disableViewportOffset, virtualKe
|
|
|
25
25
|
(0, hooks_js_1.useThemedTitleBar)('gray', 'wash', undefined, disableTitleBarColor);
|
|
26
26
|
const otherStuff = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.IconSpritesheet, {}), (0, jsx_runtime_1.jsx)(toasts_js_1.Toaster, {}), (0, jsx_runtime_1.jsx)(PwaInstall_js_1.PwaInstall, { manifestPath: manifestPath })] }));
|
|
27
27
|
if (disableParticles)
|
|
28
|
-
return ((0, jsx_runtime_1.jsx)(exports.ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: (0, jsx_runtime_1.jsxs)(index_js_3.TooltipProvider, { children: [children, otherStuff] }) }));
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(exports.ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: (0, jsx_runtime_1.jsx)(index_js_3.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(index_js_2.ParticleLayer, { children: [children, otherStuff] }) }) }));
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)(exports.ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: (0, jsx_runtime_1.jsx)(toasts_js_1.DefaultToastProvider, { children: (0, jsx_runtime_1.jsxs)(index_js_3.TooltipProvider, { children: [children, otherStuff] }) }) }));
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(exports.ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: (0, jsx_runtime_1.jsx)(toasts_js_1.DefaultToastProvider, { children: (0, jsx_runtime_1.jsx)(index_js_3.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(index_js_2.ParticleLayer, { children: [children, otherStuff] }) }) }) }));
|
|
30
30
|
}
|
|
31
31
|
exports.ConfigContext = (0, react_1.createContext)({
|
|
32
32
|
virtualKeyboardBehavior: 'displace',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";;;AAqBA,
|
|
1
|
+
{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";;;AAqBA,4BAmDC;AAQD,8BAEC;;AAlFD,iCAA6D;AAC7D,6CAA4E;AAC5E,6FAAuF;AACvF,+CAAmD;AACnD,oDAAsD;AACtD,+DAAyD;AACzD,mDAAoE;AACpE,kDAAsD;AAWtD;;GAEG;AACH,SAAgB,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,EACpB,YAAY,GACG;IACf,IAAA,kCAAuB,EAAC,qBAAqB,CAAC,CAAC;IAC/C,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,IAAA,0DAA0B,EAAC,gCAAgC,CAAC,CAAC;IAC7D,IAAA,4BAAiB,EAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,CAClB,6DACC,uBAAC,0BAAe,KAAG,EACnB,uBAAC,mBAAO,KAAG,EACX,uBAAC,0BAAU,IAAC,YAAY,EAAE,YAAY,GAAI,IACxC,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,uBAAC,qBAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,uBAAC,gCAAoB,cACpB,wBAAC,0BAAe,eACd,QAAQ,EACR,UAAU,IACM,GACI,GACC,CACzB,CAAC;IAEH,OAAO,CACN,uBAAC,qBAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,uBAAC,gCAAoB,cACpB,uBAAC,0BAAe,cACf,wBAAC,wBAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACI,GACC,CACzB,CAAC;AACH,CAAC;AAEY,QAAA,aAAa,GAAG,IAAA,qBAAa,EAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,SAAgB,SAAS;IACxB,OAAO,IAAA,kBAAU,EAAC,qBAAa,CAAC,CAAC;AAClC,CAAC"}
|
|
@@ -1,5 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { Toast, ToastManagerAddOptions, ToastManagerPromiseOptions } from '@base-ui/react/toast';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { ButtonProps } from '../button/index.js';
|
|
4
|
+
export declare const manager: import("@base-ui/react/toast/createToastManager.js").ToastManager;
|
|
5
|
+
export declare const DefaultToastProvider: ({ children, ...rest }: {
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
timeout?: number;
|
|
8
|
+
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
9
|
+
export declare function Toaster(): import("react/jsx-runtime.js").JSX.Element;
|
|
10
|
+
export interface CustomToastData {
|
|
11
|
+
actions?: {
|
|
12
|
+
label: ReactNode;
|
|
13
|
+
onClick: () => void;
|
|
14
|
+
emphasis?: ButtonProps['emphasis'];
|
|
15
|
+
color?: ButtonProps['color'];
|
|
16
|
+
}[];
|
|
17
|
+
loading?: boolean;
|
|
18
|
+
}
|
|
19
|
+
export interface ToastOptions extends ToastManagerAddOptions<CustomToastData> {
|
|
20
|
+
/** @deprecated - use timeout */
|
|
21
|
+
duration?: number;
|
|
22
|
+
}
|
|
23
|
+
declare function baseToast(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions): string;
|
|
24
|
+
export declare const toast: typeof baseToast & {
|
|
25
|
+
success(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions): string;
|
|
26
|
+
error(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions): string;
|
|
27
|
+
promise: <T>(promise: Promise<T>, options: ToastManagerPromiseOptions<T, CustomToastData>) => Promise<T>;
|
|
28
|
+
loading: (messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions) => {
|
|
29
|
+
id: string;
|
|
30
|
+
complete: (messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions) => void;
|
|
31
|
+
};
|
|
32
|
+
update: (id: string, messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions) => void;
|
|
33
|
+
close: (id: string) => void;
|
|
34
|
+
};
|
|
35
|
+
export type * from '@base-ui/react/toast';
|
|
36
|
+
export { Toast };
|
|
@@ -1,47 +1,118 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
"use strict";
|
|
3
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
8
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
9
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
10
|
+
t[p[i]] = s[p[i]];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
3
14
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
15
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
16
|
};
|
|
6
17
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.
|
|
18
|
+
exports.Toast = exports.toast = exports.DefaultToastProvider = exports.manager = void 0;
|
|
19
|
+
exports.Toaster = Toaster;
|
|
8
20
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, "
|
|
21
|
+
const toast_1 = require("@base-ui/react/toast");
|
|
22
|
+
Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return toast_1.Toast; } });
|
|
11
23
|
const clsx_1 = __importDefault(require("clsx"));
|
|
12
|
-
const react_1 = require("motion/react");
|
|
13
|
-
const react_dom_1 = require("react-dom");
|
|
14
|
-
const react_hot_toast_2 = require("react-hot-toast");
|
|
15
24
|
const colorMode_js_1 = require("../../colorMode.js");
|
|
25
|
+
const index_js_1 = require("../button/index.js");
|
|
16
26
|
const Icon_js_1 = require("../icon/Icon.js");
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const visibleToasts = toasts.filter((t) => t.visible);
|
|
23
|
-
const target = typeof document === 'undefined' ? null : document.body;
|
|
24
|
-
if (!target) {
|
|
25
|
-
return null;
|
|
26
|
-
}
|
|
27
|
-
return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('fixed z-100000 flex flex-col items-center gap-xs left-1/2 center-x top-sm max-w-400px', mode === 'dark' ? 'override-light' : 'override-dark', props.className), onMouseEnter: startPause, onMouseLeave: endPause, children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: visibleToasts.map((toast) => {
|
|
28
|
-
const message = typeof toast.message === 'function'
|
|
29
|
-
? toast.message(toast)
|
|
30
|
-
: toast.message;
|
|
31
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.motion.div, Object.assign({ className: (0, clsx_1.default)({
|
|
32
|
-
'palette-success': toast.type === 'success',
|
|
33
|
-
'palette-attention': toast.type === 'error',
|
|
34
|
-
'palette-info': toast.type === 'blank',
|
|
35
|
-
}, 'bg-main-wash color-black rounded-md shadow-md px-md py-sm', 'flex flex-row gap-sm') }, toast.ariaProps, { initial: { scale: 0.8, opacity: 0, y: -20 }, exit: { scale: 0.8, opacity: 0, y: -20 }, animate: {
|
|
36
|
-
scale: 1,
|
|
37
|
-
opacity: 1,
|
|
38
|
-
y: 0,
|
|
39
|
-
}, layout: true, children: [(0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { className: "mt-2px", loading: toast.type === 'loading', name: toast.type === 'success'
|
|
40
|
-
? 'check'
|
|
41
|
-
: toast.type === 'error'
|
|
42
|
-
? 'warning'
|
|
43
|
-
: 'info' }), message] }), toast.id));
|
|
44
|
-
}) }) }), target);
|
|
27
|
+
const Spinner_js_1 = require("../spinner/Spinner.js");
|
|
28
|
+
exports.manager = toast_1.Toast.createToastManager();
|
|
29
|
+
const DefaultToastProvider = (_a) => {
|
|
30
|
+
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(toast_1.Toast.Provider, Object.assign({ toastManager: exports.manager }, rest, { children: children })));
|
|
45
32
|
};
|
|
46
|
-
exports.
|
|
33
|
+
exports.DefaultToastProvider = DefaultToastProvider;
|
|
34
|
+
function Toaster() {
|
|
35
|
+
return ((0, jsx_runtime_1.jsx)(toast_1.Toast.Portal, { children: (0, jsx_runtime_1.jsx)(toast_1.Toast.Viewport, { className: "overflow-clip", children: (0, jsx_runtime_1.jsx)(ToastList, {}) }) }));
|
|
36
|
+
}
|
|
37
|
+
function ToastList() {
|
|
38
|
+
const { toasts: untypedToasts } = toast_1.Toast.useToastManager();
|
|
39
|
+
const mode = (0, colorMode_js_1.useResolvedColorMode)();
|
|
40
|
+
const toasts = untypedToasts;
|
|
41
|
+
return toasts.map((toast) => {
|
|
42
|
+
var _a, _b;
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(toast_1.Toast.Root, { toast: toast, swipeDirection: ['up', 'right', 'left'], className: (0, clsx_1.default)(
|
|
44
|
+
// variable setup
|
|
45
|
+
'[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))]', '[--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))]', '[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]',
|
|
46
|
+
// basic positioning
|
|
47
|
+
'absolute left-0 top-xs left-auto z-[calc(100000-var(--toast-index))] mr-0 w-full origin-top', 'h-[--height]', 'flex flex-col gap-xs items-center',
|
|
48
|
+
// other properties
|
|
49
|
+
'select-none',
|
|
50
|
+
// animation and interaction
|
|
51
|
+
'translate-x-[--toast-swipe-movement-x] translate-y-[calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height)))] scale-[var(--scale)]', '[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]',
|
|
52
|
+
// ::after
|
|
53
|
+
'after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-empty',
|
|
54
|
+
// starting style
|
|
55
|
+
'data-[starting-style]:-translate-y-150%',
|
|
56
|
+
// limited
|
|
57
|
+
'data-[limited]:opacity-0',
|
|
58
|
+
//expanded
|
|
59
|
+
'data-[expanded]:h-[--toast-height] data-[expanded]:translate-x-[--toast-swipe-movement-x] data-[expanded]:translate-y-[--offset-y] data-[expanded]:scale-100',
|
|
60
|
+
// ending styles
|
|
61
|
+
'data-[ending-style]:opacity-0',
|
|
62
|
+
// natural or close button
|
|
63
|
+
'[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:-translate-y-150% [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:scale-90 [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:opacity-50',
|
|
64
|
+
// swiping down
|
|
65
|
+
'data-[ending-style]:data-[swipe-direction=down]:translate-y-[calc(var(--toast-swipe-movement-y)+150%)]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:translate-y-[calc(var(--toast-swipe-movement-y)+150%)]',
|
|
66
|
+
// swiping left
|
|
67
|
+
'data-[ending-style]:data-[swipe-direction=left]:translate-x-[calc(var(--toast-swipe-movement-x)-150%)] data-[ending-style]:data-[swipe-direction=left]:translate-y-[var(--offset-y)]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:translate-x-[calc(var(--toast-swipe-movement-x)-150%)] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:translate-y-[var(--offset-y)]',
|
|
68
|
+
// swiping right
|
|
69
|
+
'data-[ending-style]:data-[swipe-direction=right]:translate-x-[calc(var(--toast-swipe-movement-x)+150%)] data-[ending-style]:data-[swipe-direction=right]:translate-y-[var(--offset-y)]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:translate-x-[calc(var(--toast-swipe-movement-x)+150%)] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:translate-y-[var(--offset-y)]',
|
|
70
|
+
// swiping up
|
|
71
|
+
'data-[ending-style]:data-[swipe-direction=up]:translate-y-[calc(var(--toast-swipe-movement-y)-150%)]', 'data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:translate-y-[calc(var(--toast-swipe-movement-y)-150%)]',
|
|
72
|
+
// themeing
|
|
73
|
+
{
|
|
74
|
+
'palette-success': toast.type === 'success',
|
|
75
|
+
'palette-attention': toast.type === 'error',
|
|
76
|
+
'palette-info': toast.type === 'blank',
|
|
77
|
+
}, mode === 'dark' ? 'override-light' : 'override-dark'), children: (0, jsx_runtime_1.jsxs)(toast_1.Toast.Content, { className: "[&[data-behind]:not([data-expanded])]:pointer-events-none flex flex-col gap-2px max-w-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('layer-components:bg-main-wash layer-components:color-black layer-components:rounded-md layer-components:b-1 layer-components:b-solid layer-components:b-black layer-components:shadow-md layer-components:pl-md layer-components:pr-sm layer-components:py-sm layer-components:relative', 'layer-components:flex layer-components:flex-row layer-components:gap-sm', '[[data-behind]:not([data-expanded])_&]:bg-darken-2 [[data-behind]:not([data-expanded])_&]:max-h-[--height]'), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('flex flex-row gap-xs items-center', '[[data-behind]:not([data-expanded])_&]:opacity-0 [[data-expanded]_&]:opacity-100 transition-opacity [transition-duration:250ms]'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-xs", children: [(0, jsx_runtime_1.jsx)(toast_1.Toast.Title, { className: "text-sm leading-tight font-bold m-0" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-sm", children: [((_a = toast.data) === null || _a === void 0 ? void 0 : _a.loading) ? ((0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: 15, className: "relative top-2px" })) : toast.type === 'success' ? ((0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "check", color: "success", className: "relative top-2px" })) : toast.type === 'error' ? ((0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "warning", color: "attention", className: "relative top-2px" })) : null, (0, jsx_runtime_1.jsx)(toast_1.Toast.Description, { className: "text-sm m-0" })] })] }), (0, jsx_runtime_1.jsx)(toast_1.Toast.Close, { className: "mb-auto [[data-behind]:not([data-expanded])_&]:invisible", "aria-label": "Close", render: (0, jsx_runtime_1.jsx)(index_js_1.Button, { size: "small", emphasis: "ghost", children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "x" }) }) })] }) }), ((_b = toast.data) === null || _b === void 0 ? void 0 : _b.actions) && ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-xxs items-center ml-auto [[data-behind]:not([data-expanded])_&]:opacity-0 transition-opacity", children: toast.data.actions.toReversed().map((action, index) => ((0, jsx_runtime_1.jsx)(toast_1.Toast.Action, { className: "text-xs", onClick: action.onClick, render: (0, jsx_runtime_1.jsx)(index_js_1.Button, { size: "small", emphasis: action.emphasis, color: action.color }), children: action.label }, index))) }))] }) }, toast.id));
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
function toOptions(messageOrOptions, maybeOptions) {
|
|
81
|
+
var _a, _b, _c;
|
|
82
|
+
const description = typeof messageOrOptions === 'string' ? messageOrOptions : undefined;
|
|
83
|
+
const options = typeof messageOrOptions === 'string' ? maybeOptions : messageOrOptions;
|
|
84
|
+
const extraOptions = typeof messageOrOptions === 'string' && maybeOptions ? maybeOptions : {};
|
|
85
|
+
const finalOptions = Object.assign(Object.assign({ description, timeout: (_c = (_b = (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : extraOptions === null || extraOptions === void 0 ? void 0 : extraOptions.duration) !== null && _b !== void 0 ? _b : options === null || options === void 0 ? void 0 : options.timeout) !== null && _c !== void 0 ? _c : extraOptions === null || extraOptions === void 0 ? void 0 : extraOptions.timeout }, options), extraOptions);
|
|
86
|
+
return finalOptions;
|
|
87
|
+
}
|
|
88
|
+
function baseToast(messageOrOptions, maybeOptions) {
|
|
89
|
+
const finalOptions = toOptions(messageOrOptions, maybeOptions);
|
|
90
|
+
return exports.manager.add(finalOptions);
|
|
91
|
+
}
|
|
92
|
+
exports.toast = Object.assign(baseToast, {
|
|
93
|
+
success(messageOrOptions, maybeOptions) {
|
|
94
|
+
return baseToast(messageOrOptions, Object.assign({ type: 'success' }, maybeOptions));
|
|
95
|
+
},
|
|
96
|
+
error(messageOrOptions, maybeOptions) {
|
|
97
|
+
return baseToast(messageOrOptions, Object.assign({ type: 'error' }, maybeOptions));
|
|
98
|
+
},
|
|
99
|
+
promise: function (promise, options) {
|
|
100
|
+
return exports.manager.promise(promise, options);
|
|
101
|
+
},
|
|
102
|
+
loading: function (messageOrOptions, maybeOptions) {
|
|
103
|
+
const id = baseToast(messageOrOptions, Object.assign({ timeout: 0, data: { loading: true } }, maybeOptions));
|
|
104
|
+
return {
|
|
105
|
+
id,
|
|
106
|
+
complete: (messageOrOptions, maybeOptions) => {
|
|
107
|
+
exports.manager.update(id, toOptions(messageOrOptions, Object.assign(Object.assign({}, maybeOptions), { data: { loading: false } })));
|
|
108
|
+
},
|
|
109
|
+
};
|
|
110
|
+
},
|
|
111
|
+
update: function (id, messageOrOptions, maybeOptions) {
|
|
112
|
+
return exports.manager.update(id, toOptions(messageOrOptions, maybeOptions));
|
|
113
|
+
},
|
|
114
|
+
close: function (id) {
|
|
115
|
+
return exports.manager.close(id);
|
|
116
|
+
},
|
|
117
|
+
});
|
|
47
118
|
//# sourceMappingURL=toasts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toasts.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toasts.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.Default = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const react_hot_toast_1 = require("react-hot-toast");
|
|
7
6
|
const Box_js_1 = require("../box/Box.js");
|
|
8
7
|
const Button_js_1 = require("../button/Button.js");
|
|
8
|
+
const toasts_js_1 = require("./toasts.js");
|
|
9
9
|
const meta = {
|
|
10
10
|
title: 'Components/toasts',
|
|
11
11
|
argTypes: {},
|
|
@@ -17,31 +17,62 @@ exports.default = meta;
|
|
|
17
17
|
exports.Default = {
|
|
18
18
|
render(args) {
|
|
19
19
|
return ((0, jsx_runtime_1.jsxs)(Box_js_1.Box, { col: true, gap: true, children: [(0, jsx_runtime_1.jsx)(Button_js_1.Button, { onClick: () => {
|
|
20
|
-
(0,
|
|
21
|
-
duration:
|
|
20
|
+
(0, toasts_js_1.toast)('This is a default toast! With a lot of text. Enough to wrap around.', {
|
|
21
|
+
duration: 120000,
|
|
22
22
|
});
|
|
23
23
|
}, children: "Show Default Toast" }), (0, jsx_runtime_1.jsx)(Button_js_1.Button, { color: "success", onClick: () => {
|
|
24
|
-
|
|
25
|
-
duration:
|
|
24
|
+
toasts_js_1.toast.success('This is a success toast!', {
|
|
25
|
+
duration: 20000,
|
|
26
26
|
});
|
|
27
27
|
}, children: "Show Success Toast" }), (0, jsx_runtime_1.jsx)(Button_js_1.Button, { color: "attention", onClick: () => {
|
|
28
|
-
|
|
29
|
-
duration:
|
|
28
|
+
toasts_js_1.toast.error('This is an error toast!', {
|
|
29
|
+
duration: 20000,
|
|
30
30
|
});
|
|
31
31
|
}, children: "Show Error Toast" }), (0, jsx_runtime_1.jsx)(Button_js_1.Button, { onClick: () => {
|
|
32
|
-
const
|
|
32
|
+
const { complete } = toasts_js_1.toast.loading('This is a loading toast!');
|
|
33
33
|
setTimeout(() => {
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
complete('Loading complete!', {
|
|
35
|
+
duration: 5000,
|
|
36
|
+
type: 'success',
|
|
37
|
+
});
|
|
38
|
+
}, 5000);
|
|
36
39
|
}, children: "Show Loading Toast" }), (0, jsx_runtime_1.jsx)(Button_js_1.Button, { onClick: () => {
|
|
37
|
-
|
|
40
|
+
toasts_js_1.toast.promise((async () => {
|
|
38
41
|
await new Promise((resolve) => setTimeout(resolve, 3000));
|
|
39
42
|
})(), {
|
|
40
|
-
loading: 'Promise is loading...',
|
|
43
|
+
loading: 'Promise is loading... This text is longer to test animation of transition',
|
|
41
44
|
success: 'Promise resolved!',
|
|
42
45
|
error: 'Promise rejected.',
|
|
43
46
|
});
|
|
44
|
-
}, children: "Show Promise Toast" })
|
|
47
|
+
}, children: "Show Promise Toast" }), (0, jsx_runtime_1.jsx)(Button_js_1.Button, { onClick: () => {
|
|
48
|
+
(0, toasts_js_1.toast)('This is a toast with actions!', {
|
|
49
|
+
timeout: 20000,
|
|
50
|
+
data: {
|
|
51
|
+
actions: [
|
|
52
|
+
{
|
|
53
|
+
label: 'Retry',
|
|
54
|
+
emphasis: 'primary',
|
|
55
|
+
onClick: () => {
|
|
56
|
+
alert('Retry clicked!');
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
label: 'Undo',
|
|
61
|
+
emphasis: 'light',
|
|
62
|
+
onClick: () => {
|
|
63
|
+
alert('Undo clicked!');
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
});
|
|
69
|
+
}, children: "Show Toast with Actions" }), (0, jsx_runtime_1.jsx)(Button_js_1.Button, { onClick: () => {
|
|
70
|
+
(0, toasts_js_1.toast)({
|
|
71
|
+
title: 'Rich Toast',
|
|
72
|
+
description: 'This toast has both a title and a description.',
|
|
73
|
+
timeout: 20000,
|
|
74
|
+
});
|
|
75
|
+
}, children: "Show Rich Toast" })] }));
|
|
45
76
|
},
|
|
46
77
|
};
|
|
47
78
|
//# sourceMappingURL=toasts.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toasts.stories.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.stories.tsx"],"names":[],"mappings":";;;;AACA,
|
|
1
|
+
{"version":3,"file":"toasts.stories.js","sourceRoot":"","sources":["../../../../src/components/toasts/toasts.stories.tsx"],"names":[],"mappings":";;;;AACA,0CAAoC;AACpC,mDAA6C;AAC7C,2CAAoC;AAEpC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,wBAAC,YAAG,IAAC,GAAG,QAAC,GAAG,mBACX,uBAAC,kBAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,IAAA,iBAAK,EACJ,qEAAqE,EACrE;4BACC,QAAQ,EAAE,MAAO;yBACjB,CACD,CAAC;oBACH,CAAC,mCAGO,EACT,uBAAC,kBAAM,IACN,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;wBACb,iBAAK,CAAC,OAAO,CAAC,0BAA0B,EAAE;4BACzC,QAAQ,EAAE,KAAM;yBAChB,CAAC,CAAC;oBACJ,CAAC,mCAGO,EACT,uBAAC,kBAAM,IACN,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE;wBACb,iBAAK,CAAC,KAAK,CAAC,yBAAyB,EAAE;4BACtC,QAAQ,EAAE,KAAM;yBAChB,CAAC,CAAC;oBACJ,CAAC,iCAGO,EACT,uBAAC,kBAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,MAAM,EAAE,QAAQ,EAAE,GAAG,iBAAK,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;wBAC/D,UAAU,CAAC,GAAG,EAAE;4BACf,QAAQ,CAAC,mBAAmB,EAAE;gCAC7B,QAAQ,EAAE,IAAI;gCACd,IAAI,EAAE,SAAS;6BACf,CAAC,CAAC;wBACJ,CAAC,EAAE,IAAI,CAAC,CAAC;oBACV,CAAC,mCAGO,EACT,uBAAC,kBAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,iBAAK,CAAC,OAAO,CACZ,CAAC,KAAK,IAAI,EAAE;4BACX,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;wBAC3D,CAAC,CAAC,EAAE,EACJ;4BACC,OAAO,EACN,2EAA2E;4BAC5E,OAAO,EAAE,mBAAmB;4BAC5B,KAAK,EAAE,mBAAmB;yBAC1B,CACD,CAAC;oBACH,CAAC,mCAGO,EACT,uBAAC,kBAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,IAAA,iBAAK,EAAC,+BAA+B,EAAE;4BACtC,OAAO,EAAE,KAAM;4BACf,IAAI,EAAE;gCACL,OAAO,EAAE;oCACR;wCACC,KAAK,EAAE,OAAO;wCACd,QAAQ,EAAE,SAAS;wCACnB,OAAO,EAAE,GAAG,EAAE;4CACb,KAAK,CAAC,gBAAgB,CAAC,CAAC;wCACzB,CAAC;qCACD;oCACD;wCACC,KAAK,EAAE,MAAM;wCACb,QAAQ,EAAE,OAAO;wCACjB,OAAO,EAAE,GAAG,EAAE;4CACb,KAAK,CAAC,eAAe,CAAC,CAAC;wCACxB,CAAC;qCACD;iCACD;6BACD;yBACD,CAAC,CAAC;oBACJ,CAAC,wCAGO,EACT,uBAAC,kBAAM,IACN,OAAO,EAAE,GAAG,EAAE;wBACb,IAAA,iBAAK,EAAC;4BACL,KAAK,EAAE,YAAY;4BACnB,WAAW,EAAE,gDAAgD;4BAC7D,OAAO,EAAE,KAAM;yBACf,CAAC,CAAC;oBACJ,CAAC,gCAGO,IACJ,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
|