@metamask-previews/design-system-react 0.24.0-preview.a0fe3894 → 0.25.0-preview.1f40f69f
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 +16 -1
- package/dist/components/AvatarBase/AvatarBase.cjs +1 -1
- package/dist/components/AvatarBase/AvatarBase.cjs.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.mjs +1 -1
- package/dist/components/AvatarBase/AvatarBase.mjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.cjs +2 -2
- package/dist/components/AvatarToken/AvatarToken.cjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.mjs +2 -2
- package/dist/components/AvatarToken/AvatarToken.mjs.map +1 -1
- package/dist/components/FormTextField/FormTextField.cjs +38 -0
- package/dist/components/FormTextField/FormTextField.cjs.map +1 -0
- package/dist/components/FormTextField/FormTextField.d.cts +4 -0
- package/dist/components/FormTextField/FormTextField.d.cts.map +1 -0
- package/dist/components/FormTextField/FormTextField.d.mts +4 -0
- package/dist/components/FormTextField/FormTextField.d.mts.map +1 -0
- package/dist/components/FormTextField/FormTextField.mjs +19 -0
- package/dist/components/FormTextField/FormTextField.mjs.map +1 -0
- package/dist/components/FormTextField/FormTextField.types.cjs +3 -0
- package/dist/components/FormTextField/FormTextField.types.cjs.map +1 -0
- package/dist/components/FormTextField/FormTextField.types.d.cts +50 -0
- package/dist/components/FormTextField/FormTextField.types.d.cts.map +1 -0
- package/dist/components/FormTextField/FormTextField.types.d.mts +50 -0
- package/dist/components/FormTextField/FormTextField.types.d.mts.map +1 -0
- package/dist/components/FormTextField/FormTextField.types.mjs +2 -0
- package/dist/components/FormTextField/FormTextField.types.mjs.map +1 -0
- package/dist/components/FormTextField/index.cjs +6 -0
- package/dist/components/FormTextField/index.cjs.map +1 -0
- package/dist/components/FormTextField/index.d.cts +3 -0
- package/dist/components/FormTextField/index.d.cts.map +1 -0
- package/dist/components/FormTextField/index.d.mts +3 -0
- package/dist/components/FormTextField/index.d.mts.map +1 -0
- package/dist/components/FormTextField/index.mjs +2 -0
- package/dist/components/FormTextField/index.mjs.map +1 -0
- package/dist/components/Popover/Popover.cjs +129 -0
- package/dist/components/Popover/Popover.cjs.map +1 -0
- package/dist/components/Popover/Popover.constants.cjs +28 -0
- package/dist/components/Popover/Popover.constants.cjs.map +1 -0
- package/dist/components/Popover/Popover.constants.d.cts +12 -0
- package/dist/components/Popover/Popover.constants.d.cts.map +1 -0
- package/dist/components/Popover/Popover.constants.d.mts +12 -0
- package/dist/components/Popover/Popover.constants.d.mts.map +1 -0
- package/dist/components/Popover/Popover.constants.mjs +25 -0
- package/dist/components/Popover/Popover.constants.mjs.map +1 -0
- package/dist/components/Popover/Popover.d.cts +4 -0
- package/dist/components/Popover/Popover.d.cts.map +1 -0
- package/dist/components/Popover/Popover.d.mts +4 -0
- package/dist/components/Popover/Popover.d.mts.map +1 -0
- package/dist/components/Popover/Popover.mjs +110 -0
- package/dist/components/Popover/Popover.mjs.map +1 -0
- package/dist/components/Popover/Popover.types.cjs +33 -0
- package/dist/components/Popover/Popover.types.cjs.map +1 -0
- package/dist/components/Popover/Popover.types.d.cts +128 -0
- package/dist/components/Popover/Popover.types.d.cts.map +1 -0
- package/dist/components/Popover/Popover.types.d.mts +128 -0
- package/dist/components/Popover/Popover.types.d.mts.map +1 -0
- package/dist/components/Popover/Popover.types.mjs +30 -0
- package/dist/components/Popover/Popover.types.mjs.map +1 -0
- package/dist/components/Popover/index.cjs +9 -0
- package/dist/components/Popover/index.cjs.map +1 -0
- package/dist/components/Popover/index.d.cts +4 -0
- package/dist/components/Popover/index.d.cts.map +1 -0
- package/dist/components/Popover/index.d.mts +4 -0
- package/dist/components/Popover/index.d.mts.map +1 -0
- package/dist/components/Popover/index.mjs +3 -0
- package/dist/components/Popover/index.mjs.map +1 -0
- package/dist/components/TextArea/TextArea.cjs +37 -0
- package/dist/components/TextArea/TextArea.cjs.map +1 -0
- package/dist/components/TextArea/TextArea.constants.cjs +35 -0
- package/dist/components/TextArea/TextArea.constants.cjs.map +1 -0
- package/dist/components/TextArea/TextArea.constants.d.cts +28 -0
- package/dist/components/TextArea/TextArea.constants.d.cts.map +1 -0
- package/dist/components/TextArea/TextArea.constants.d.mts +28 -0
- package/dist/components/TextArea/TextArea.constants.d.mts.map +1 -0
- package/dist/components/TextArea/TextArea.constants.mjs +32 -0
- package/dist/components/TextArea/TextArea.constants.mjs.map +1 -0
- package/dist/components/TextArea/TextArea.d.cts +9 -0
- package/dist/components/TextArea/TextArea.d.cts.map +1 -0
- package/dist/components/TextArea/TextArea.d.mts +9 -0
- package/dist/components/TextArea/TextArea.d.mts.map +1 -0
- package/dist/components/TextArea/TextArea.mjs +18 -0
- package/dist/components/TextArea/TextArea.mjs.map +1 -0
- package/dist/components/TextArea/TextArea.types.cjs +3 -0
- package/dist/components/TextArea/TextArea.types.cjs.map +1 -0
- package/dist/components/TextArea/TextArea.types.d.cts +33 -0
- package/dist/components/TextArea/TextArea.types.d.cts.map +1 -0
- package/dist/components/TextArea/TextArea.types.d.mts +33 -0
- package/dist/components/TextArea/TextArea.types.d.mts.map +1 -0
- package/dist/components/TextArea/TextArea.types.mjs +2 -0
- package/dist/components/TextArea/TextArea.types.mjs.map +1 -0
- package/dist/components/TextArea/index.cjs +8 -0
- package/dist/components/TextArea/index.cjs.map +1 -0
- package/dist/components/TextArea/index.d.cts +4 -0
- package/dist/components/TextArea/index.d.cts.map +1 -0
- package/dist/components/TextArea/index.d.mts +4 -0
- package/dist/components/TextArea/index.d.mts.map +1 -0
- package/dist/components/TextArea/index.mjs +3 -0
- package/dist/components/TextArea/index.mjs.map +1 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.cjs +40 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.cjs.map +1 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.d.cts +6 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.d.cts.map +1 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.d.mts +6 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.d.mts.map +1 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.mjs +21 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.mjs.map +1 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.types.cjs +3 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.types.cjs.map +1 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.types.d.cts +17 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.types.d.cts.map +1 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.types.d.mts +17 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.types.d.mts.map +1 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.types.mjs +2 -0
- package/dist/components/TextFieldSearch/TextFieldSearch.types.mjs.map +1 -0
- package/dist/components/TextFieldSearch/index.cjs +6 -0
- package/dist/components/TextFieldSearch/index.cjs.map +1 -0
- package/dist/components/TextFieldSearch/index.d.cts +3 -0
- package/dist/components/TextFieldSearch/index.d.cts.map +1 -0
- package/dist/components/TextFieldSearch/index.d.mts +3 -0
- package/dist/components/TextFieldSearch/index.d.mts.map +1 -0
- package/dist/components/TextFieldSearch/index.mjs +2 -0
- package/dist/components/TextFieldSearch/index.mjs.map +1 -0
- package/dist/components/Toast/Toast.cjs +1 -1
- package/dist/components/Toast/Toast.cjs.map +1 -1
- package/dist/components/Toast/Toast.mjs +1 -1
- package/dist/components/Toast/Toast.mjs.map +1 -1
- package/dist/components/Toast/Toaster.cjs +75 -39
- package/dist/components/Toast/Toaster.cjs.map +1 -1
- package/dist/components/Toast/Toaster.d.cts.map +1 -1
- package/dist/components/Toast/Toaster.d.mts.map +1 -1
- package/dist/components/Toast/Toaster.mjs +76 -40
- package/dist/components/Toast/Toaster.mjs.map +1 -1
- package/dist/components/index.cjs +13 -1
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +8 -0
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +8 -0
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +4 -0
- package/dist/components/index.mjs.map +1 -1
- package/package.json +6 -5
|
@@ -0,0 +1,40 @@
|
|
|
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.TextFieldSearch = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
29
|
+
const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
|
|
30
|
+
const Icon_1 = require("../Icon/index.cjs");
|
|
31
|
+
const TextField_1 = require("../TextField/index.cjs");
|
|
32
|
+
exports.TextFieldSearch = (0, react_1.forwardRef)(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, ...props }, ref) => {
|
|
33
|
+
const clearButton = value ? (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: Icon_1.IconName.CircleX, size: ButtonIcon_1.ButtonIconSize.Md, iconProps: { color: Icon_1.IconColor.IconAlternative }, ...clearButtonProps, isDisabled: isDisabled || clearButtonProps?.isDisabled, onClick: clearButtonOnClick })) : null;
|
|
34
|
+
const resolvedEndAccessory = clearButton || endAccessory ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
35
|
+
clearButton,
|
|
36
|
+
endAccessory)) : undefined;
|
|
37
|
+
return (react_1.default.createElement(TextField_1.TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextField_1.TextFieldType.Search, className: (0, tw_merge_1.twMerge)('rounded-full', className), startAccessory: startAccessory ?? (react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Search, size: Icon_1.IconSize.Md, color: Icon_1.IconColor.IconAlternative })), endAccessory: resolvedEndAccessory, ...props }));
|
|
38
|
+
});
|
|
39
|
+
exports.TextFieldSearch.displayName = 'TextFieldSearch';
|
|
40
|
+
//# sourceMappingURL=TextFieldSearch.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.cjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2D;AAC3D,4CAA8D;AAC9D,sDAAwD;AAI3C,QAAA,eAAe,GAAG,IAAA,kBAAU,EACvC,CACE,EACE,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAC1B,8BAAC,uBAAU,mBACG,gCAAgC,EAC5C,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,eAAQ,CAAC,OAAO,EAC1B,IAAI,EAAE,2BAAc,CAAC,EAAE,EACvB,SAAS,EAAE,EAAE,KAAK,EAAE,gBAAS,CAAC,eAAe,EAAE,KAC3C,gBAAgB,EACpB,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,UAAU,EACtD,OAAO,EAAE,kBAAkB,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,oBAAoB,GACxB,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC5B;QACG,WAAW;QACX,YAAY,CACZ,CACJ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,8BAAC,qBAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,yBAAa,CAAC,MAAM,EAC1B,SAAS,EAAE,IAAA,kBAAO,EAAC,cAAc,EAAE,SAAS,CAAC,EAC7C,cAAc,EACZ,cAAc,IAAI,CAChB,8BAAC,WAAI,IACH,IAAI,EAAE,eAAQ,CAAC,MAAM,EACrB,IAAI,EAAE,eAAQ,CAAC,EAAE,EACjB,KAAK,EAAE,gBAAS,CAAC,eAAe,GAChC,CACH,EAEH,YAAY,EAAE,oBAAoB,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { TextField, TextFieldType } from '../TextField';\n\nimport type { TextFieldSearchProps } from './TextFieldSearch.types';\n\nexport const TextFieldSearch = forwardRef<HTMLDivElement, TextFieldSearchProps>(\n (\n {\n clearButtonOnClick,\n clearButtonProps,\n endAccessory,\n value,\n startAccessory,\n isDisabled = false,\n className,\n ...props\n },\n ref,\n ) => {\n const clearButton = value ? (\n <ButtonIcon\n data-testid=\"text-field-search-clear-button\"\n ariaLabel=\"Clear\"\n iconName={IconName.CircleX}\n size={ButtonIconSize.Md}\n iconProps={{ color: IconColor.IconAlternative }}\n {...clearButtonProps}\n isDisabled={isDisabled || clearButtonProps?.isDisabled}\n onClick={clearButtonOnClick}\n />\n ) : null;\n\n const resolvedEndAccessory =\n clearButton || endAccessory ? (\n <>\n {clearButton}\n {endAccessory}\n </>\n ) : undefined;\n\n return (\n <TextField\n ref={ref}\n value={value}\n isDisabled={isDisabled}\n type={TextFieldType.Search}\n className={twMerge('rounded-full', className)}\n startAccessory={\n startAccessory ?? (\n <Icon\n name={IconName.Search}\n size={IconSize.Md}\n color={IconColor.IconAlternative}\n />\n )\n }\n endAccessory={resolvedEndAccessory}\n {...props}\n />\n );\n },\n);\n\nTextFieldSearch.displayName = 'TextFieldSearch';\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare const TextFieldSearch: React.ForwardRefExoticComponent<Omit<import("../TextField/index.cjs").TextFieldProps, "type"> & {
|
|
3
|
+
clearButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
4
|
+
clearButtonProps?: Partial<import("../ButtonIcon/index.cjs").ButtonIconProps> | undefined;
|
|
5
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
//# sourceMappingURL=TextFieldSearch.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.d.cts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;wCAwD3B,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare const TextFieldSearch: React.ForwardRefExoticComponent<Omit<import("../TextField/index.mjs").TextFieldProps, "type"> & {
|
|
3
|
+
clearButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
4
|
+
clearButtonProps?: Partial<import("../ButtonIcon/index.mjs").ButtonIconProps> | undefined;
|
|
5
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
//# sourceMappingURL=TextFieldSearch.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.d.mts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;wCAwD3B,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
function $importDefault(module) {
|
|
2
|
+
if (module?.__esModule) {
|
|
3
|
+
return module.default;
|
|
4
|
+
}
|
|
5
|
+
return module;
|
|
6
|
+
}
|
|
7
|
+
import $React, { forwardRef } from "react";
|
|
8
|
+
const React = $importDefault($React);
|
|
9
|
+
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
10
|
+
import { ButtonIcon, ButtonIconSize } from "../ButtonIcon/index.mjs";
|
|
11
|
+
import { Icon, IconColor, IconName, IconSize } from "../Icon/index.mjs";
|
|
12
|
+
import { TextField, TextFieldType } from "../TextField/index.mjs";
|
|
13
|
+
export const TextFieldSearch = forwardRef(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, ...props }, ref) => {
|
|
14
|
+
const clearButton = value ? (React.createElement(ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: IconName.CircleX, size: ButtonIconSize.Md, iconProps: { color: IconColor.IconAlternative }, ...clearButtonProps, isDisabled: isDisabled || clearButtonProps?.isDisabled, onClick: clearButtonOnClick })) : null;
|
|
15
|
+
const resolvedEndAccessory = clearButton || endAccessory ? (React.createElement(React.Fragment, null,
|
|
16
|
+
clearButton,
|
|
17
|
+
endAccessory)) : undefined;
|
|
18
|
+
return (React.createElement(TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextFieldType.Search, className: twMerge('rounded-full', className), startAccessory: startAccessory ?? (React.createElement(Icon, { name: IconName.Search, size: IconSize.Md, color: IconColor.IconAlternative })), endAccessory: resolvedEndAccessory, ...props }));
|
|
19
|
+
});
|
|
20
|
+
TextFieldSearch.displayName = 'TextFieldSearch';
|
|
21
|
+
//# sourceMappingURL=TextFieldSearch.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.mjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,+BAAqB;AAIxD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,CACE,EACE,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAC1B,oBAAC,UAAU,mBACG,gCAAgC,EAC5C,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,QAAQ,CAAC,OAAO,EAC1B,IAAI,EAAE,cAAc,CAAC,EAAE,EACvB,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE,KAC3C,gBAAgB,EACpB,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,UAAU,EACtD,OAAO,EAAE,kBAAkB,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,oBAAoB,GACxB,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC5B;QACG,WAAW;QACX,YAAY,CACZ,CACJ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,aAAa,CAAC,MAAM,EAC1B,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,SAAS,CAAC,EAC7C,cAAc,EACZ,cAAc,IAAI,CAChB,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,MAAM,EACrB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,KAAK,EAAE,SAAS,CAAC,eAAe,GAChC,CACH,EAEH,YAAY,EAAE,oBAAoB,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { TextField, TextFieldType } from '../TextField';\n\nimport type { TextFieldSearchProps } from './TextFieldSearch.types';\n\nexport const TextFieldSearch = forwardRef<HTMLDivElement, TextFieldSearchProps>(\n (\n {\n clearButtonOnClick,\n clearButtonProps,\n endAccessory,\n value,\n startAccessory,\n isDisabled = false,\n className,\n ...props\n },\n ref,\n ) => {\n const clearButton = value ? (\n <ButtonIcon\n data-testid=\"text-field-search-clear-button\"\n ariaLabel=\"Clear\"\n iconName={IconName.CircleX}\n size={ButtonIconSize.Md}\n iconProps={{ color: IconColor.IconAlternative }}\n {...clearButtonProps}\n isDisabled={isDisabled || clearButtonProps?.isDisabled}\n onClick={clearButtonOnClick}\n />\n ) : null;\n\n const resolvedEndAccessory =\n clearButton || endAccessory ? (\n <>\n {clearButton}\n {endAccessory}\n </>\n ) : undefined;\n\n return (\n <TextField\n ref={ref}\n value={value}\n isDisabled={isDisabled}\n type={TextFieldType.Search}\n className={twMerge('rounded-full', className)}\n startAccessory={\n startAccessory ?? (\n <Icon\n name={IconName.Search}\n size={IconSize.Md}\n color={IconColor.IconAlternative}\n />\n )\n }\n endAccessory={resolvedEndAccessory}\n {...props}\n />\n );\n },\n);\n\nTextFieldSearch.displayName = 'TextFieldSearch';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.types.cjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextFieldProps } from '../TextField';\n\nexport type TextFieldSearchProps = Omit<TextFieldProps, 'type'> & {\n /**\n * Click handler for the clear button. Use it to reset the controlled `value`.\n * Required: the clear button always renders when `value` is truthy.\n */\n clearButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * Additional props forwarded to the clear `ButtonIcon`. `ariaLabel` is\n * defaulted to `'Clear'` and can be overridden here to provide a localized\n * label.\n */\n clearButtonProps?: Partial<ButtonIconProps>;\n};\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { ButtonIconProps } from "../ButtonIcon/index.cjs";
|
|
3
|
+
import type { TextFieldProps } from "../TextField/index.cjs";
|
|
4
|
+
export type TextFieldSearchProps = Omit<TextFieldProps, 'type'> & {
|
|
5
|
+
/**
|
|
6
|
+
* Click handler for the clear button. Use it to reset the controlled `value`.
|
|
7
|
+
* Required: the clear button always renders when `value` is truthy.
|
|
8
|
+
*/
|
|
9
|
+
clearButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
10
|
+
/**
|
|
11
|
+
* Additional props forwarded to the clear `ButtonIcon`. `ariaLabel` is
|
|
12
|
+
* defaulted to `'Clear'` and can be overridden here to provide a localized
|
|
13
|
+
* label.
|
|
14
|
+
*/
|
|
15
|
+
clearButtonProps?: Partial<ButtonIconProps>;
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=TextFieldSearch.types.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.types.d.cts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,+BAAqB;AAEnD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChE;;;OAGG;IACH,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/D;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC7C,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { ButtonIconProps } from "../ButtonIcon/index.mjs";
|
|
3
|
+
import type { TextFieldProps } from "../TextField/index.mjs";
|
|
4
|
+
export type TextFieldSearchProps = Omit<TextFieldProps, 'type'> & {
|
|
5
|
+
/**
|
|
6
|
+
* Click handler for the clear button. Use it to reset the controlled `value`.
|
|
7
|
+
* Required: the clear button always renders when `value` is truthy.
|
|
8
|
+
*/
|
|
9
|
+
clearButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
10
|
+
/**
|
|
11
|
+
* Additional props forwarded to the clear `ButtonIcon`. `ariaLabel` is
|
|
12
|
+
* defaulted to `'Clear'` and can be overridden here to provide a localized
|
|
13
|
+
* label.
|
|
14
|
+
*/
|
|
15
|
+
clearButtonProps?: Partial<ButtonIconProps>;
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=TextFieldSearch.types.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.types.d.mts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,+BAAqB;AAEnD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChE;;;OAGG;IACH,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/D;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC7C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.types.mjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextFieldProps } from '../TextField';\n\nexport type TextFieldSearchProps = Omit<TextFieldProps, 'type'> & {\n /**\n * Click handler for the clear button. Use it to reset the controlled `value`.\n * Required: the clear button always renders when `value` is truthy.\n */\n clearButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * Additional props forwarded to the clear `ButtonIcon`. `ariaLabel` is\n * defaulted to `'Clear'` and can be overridden here to provide a localized\n * label.\n */\n clearButtonProps?: Partial<ButtonIconProps>;\n};\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TextFieldSearch = void 0;
|
|
4
|
+
var TextFieldSearch_1 = require("./TextFieldSearch.cjs");
|
|
5
|
+
Object.defineProperty(exports, "TextFieldSearch", { enumerable: true, get: function () { return TextFieldSearch_1.TextFieldSearch; } });
|
|
6
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/index.ts"],"names":[],"mappings":";;;AAAA,yDAAoD;AAA3C,kHAAA,eAAe,OAAA","sourcesContent":["export { TextFieldSearch } from './TextFieldSearch';\nexport type { TextFieldSearchProps } from './TextFieldSearch.types';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,8BAA0B;AACpD,YAAY,EAAE,oBAAoB,EAAE,oCAAgC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,8BAA0B;AACpD,YAAY,EAAE,oBAAoB,EAAE,oCAAgC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,8BAA0B","sourcesContent":["export { TextFieldSearch } from './TextFieldSearch';\nexport type { TextFieldSearchProps } from './TextFieldSearch.types';\n"]}
|
|
@@ -64,7 +64,7 @@ exports.Toast = (0, react_1.forwardRef)(({ actionButtonLabel, actionButtonOnClic
|
|
|
64
64
|
: undefined;
|
|
65
65
|
// Toast reuses BannerBase so the web surface stays aligned with the shared
|
|
66
66
|
// banner layout and the React Native Toast API.
|
|
67
|
-
return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundSection, borderColor: design_system_shared_1.BoxBorderColor.BorderMuted, borderWidth: 1, className: (0, tw_merge_1.twMerge)('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose
|
|
67
|
+
return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundSection, borderColor: design_system_shared_1.BoxBorderColor.BorderMuted, borderWidth: 1, className: (0, tw_merge_1.twMerge)('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose, startAccessory: renderSeverityAccessory({
|
|
68
68
|
severity,
|
|
69
69
|
startAccessory,
|
|
70
70
|
iconProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAKiD;AACjD,+CAA0C;AAE1C,iDAAuC;AACvC,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,2DAA4D;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,oCAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,yCAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,gBAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,oCAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,iCAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,yCAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,qCAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAKiD;AACjD,+CAA0C;AAE1C,iDAAuC;AACvC,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,2DAA4D;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,oCAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,yCAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,gBAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,oCAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,iCAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,yCAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,qCAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n ToastSeverity,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { IconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n severity,\n startAccessory,\n iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity || severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n (\n {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n className,\n closeButtonProps,\n iconProps,\n onClose,\n severity = ToastSeverity.Default,\n startAccessory,\n ...props\n },\n ref,\n ) => {\n // Only pass action props through when both the label and handler are set so\n // BannerBase can keep its action button contract simple.\n const resolvedActionProps =\n actionButtonLabel && actionButtonOnClick\n ? {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n\n // Derive the close button config from the Toast API, keeping the button\n // visible whenever the consumer provides dismiss behavior or overrides.\n const resolvedCloseButtonProps =\n onClose || closeButtonProps\n ? {\n ariaLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n // Toast reuses BannerBase so the web surface stays aligned with the shared\n // banner layout and the React Native Toast API.\n return (\n <BannerBase\n ref={ref}\n {...resolvedActionProps}\n {...props}\n backgroundColor={BoxBackgroundColor.BackgroundSection}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n className={twMerge('rounded-xl', className)}\n closeButtonProps={resolvedCloseButtonProps}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
|
|
@@ -45,7 +45,7 @@ export const Toast = forwardRef(({ actionButtonLabel, actionButtonOnClick, actio
|
|
|
45
45
|
: undefined;
|
|
46
46
|
// Toast reuses BannerBase so the web surface stays aligned with the shared
|
|
47
47
|
// banner layout and the React Native Toast API.
|
|
48
|
-
return (React.createElement(BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: BoxBackgroundColor.BackgroundSection, borderColor: BoxBorderColor.BorderMuted, borderWidth: 1, className: twMerge('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose
|
|
48
|
+
return (React.createElement(BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: BoxBackgroundColor.BackgroundSection, borderColor: BoxBorderColor.BorderMuted, borderWidth: 1, className: twMerge('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose, startAccessory: renderSeverityAccessory({
|
|
49
49
|
severity,
|
|
50
50
|
startAccessory,
|
|
51
51
|
iconProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACd,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AACvC,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,8BAA0B;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,aAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,UAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"Toast.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACd,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AACvC,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,8BAA0B;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,aAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,UAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n ToastSeverity,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { IconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n severity,\n startAccessory,\n iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity || severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n (\n {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n className,\n closeButtonProps,\n iconProps,\n onClose,\n severity = ToastSeverity.Default,\n startAccessory,\n ...props\n },\n ref,\n ) => {\n // Only pass action props through when both the label and handler are set so\n // BannerBase can keep its action button contract simple.\n const resolvedActionProps =\n actionButtonLabel && actionButtonOnClick\n ? {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n\n // Derive the close button config from the Toast API, keeping the button\n // visible whenever the consumer provides dismiss behavior or overrides.\n const resolvedCloseButtonProps =\n onClose || closeButtonProps\n ? {\n ariaLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n // Toast reuses BannerBase so the web surface stays aligned with the shared\n // banner layout and the React Native Toast API.\n return (\n <BannerBase\n ref={ref}\n {...resolvedActionProps}\n {...props}\n backgroundColor={BoxBackgroundColor.BackgroundSection}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n className={twMerge('rounded-xl', className)}\n closeButtonProps={resolvedCloseButtonProps}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
|
|
@@ -28,25 +28,50 @@ const react_1 = __importStar(require("react"));
|
|
|
28
28
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
29
29
|
const Toast_1 = require("./Toast.cjs");
|
|
30
30
|
const Toast_constants_1 = require("./Toast.constants.cjs");
|
|
31
|
-
let
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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
|
+
};
|
|
38
54
|
};
|
|
39
55
|
const getToastProps = ({ hasNoTimeout: _hasNoTimeout, ...toastProps }) => toastProps;
|
|
40
56
|
const ToasterComponent = (0, react_1.forwardRef)(({ className, ...props }, ref) => {
|
|
41
57
|
const [toastOptions, setToastOptions] = (0, react_1.useState)(undefined);
|
|
58
|
+
const toastOptionsRef = (0, react_1.useRef)(undefined);
|
|
42
59
|
const [isVisible, setIsVisible] = (0, react_1.useState)(false);
|
|
60
|
+
const isVisibleRef = (0, react_1.useRef)(false);
|
|
43
61
|
const replacementTimerRef = (0, react_1.useRef)(null);
|
|
44
62
|
const autoDismissTimerRef = (0, react_1.useRef)(null);
|
|
45
63
|
const exitTimerRef = (0, react_1.useRef)(null);
|
|
46
64
|
const enterAnimationFrameRef = (0, react_1.useRef)(null);
|
|
47
65
|
const pendingToastRef = (0, react_1.useRef)(undefined);
|
|
48
|
-
const
|
|
49
|
-
|
|
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)(() => {
|
|
50
75
|
if (replacementTimerRef.current !== null) {
|
|
51
76
|
clearTimeout(replacementTimerRef.current);
|
|
52
77
|
replacementTimerRef.current = null;
|
|
@@ -63,32 +88,37 @@ const ToasterComponent = (0, react_1.forwardRef)(({ className, ...props }, ref)
|
|
|
63
88
|
cancelAnimationFrame(enterAnimationFrameRef.current);
|
|
64
89
|
enterAnimationFrameRef.current = null;
|
|
65
90
|
}
|
|
66
|
-
};
|
|
67
|
-
const
|
|
91
|
+
}, []);
|
|
92
|
+
const closeRenderedToast = (0, react_1.useCallback)(() => {
|
|
93
|
+
if (!toastOptionsRef.current && !isVisibleRef.current) {
|
|
94
|
+
clearPendingTimers();
|
|
95
|
+
pendingToastRef.current = undefined;
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
68
98
|
clearPendingTimers();
|
|
69
99
|
pendingToastRef.current = undefined;
|
|
70
|
-
|
|
100
|
+
setCurrentIsVisible(false);
|
|
71
101
|
exitTimerRef.current = setTimeout(() => {
|
|
72
102
|
exitTimerRef.current = null;
|
|
73
|
-
|
|
103
|
+
setCurrentToastOptions(undefined);
|
|
74
104
|
}, Toast_constants_1.TOAST_ANIMATION_DURATION);
|
|
75
|
-
};
|
|
105
|
+
}, [clearPendingTimers, setCurrentIsVisible, setCurrentToastOptions]);
|
|
76
106
|
// Replace the currently mounted toast rather than queueing multiple toasts.
|
|
77
107
|
// This mirrors the old app-level toast service behavior while keeping the
|
|
78
|
-
// imperative API centered in the
|
|
79
|
-
const
|
|
80
|
-
const normalizedOptions =
|
|
108
|
+
// imperative API centered in the shared single-toast store.
|
|
109
|
+
const showRenderedToast = (0, react_1.useCallback)((options) => {
|
|
110
|
+
const normalizedOptions = normalizeToastOptions(options);
|
|
81
111
|
const timeoutDuration = 0;
|
|
82
|
-
if (
|
|
112
|
+
if (toastOptionsRef.current) {
|
|
83
113
|
pendingToastRef.current = normalizedOptions;
|
|
84
|
-
|
|
114
|
+
setCurrentIsVisible(false);
|
|
85
115
|
if (exitTimerRef.current !== null) {
|
|
86
116
|
clearTimeout(exitTimerRef.current);
|
|
87
117
|
exitTimerRef.current = null;
|
|
88
118
|
}
|
|
89
119
|
exitTimerRef.current = setTimeout(() => {
|
|
90
120
|
exitTimerRef.current = null;
|
|
91
|
-
|
|
121
|
+
setCurrentToastOptions(pendingToastRef.current);
|
|
92
122
|
pendingToastRef.current = undefined;
|
|
93
123
|
}, Toast_constants_1.TOAST_ANIMATION_DURATION);
|
|
94
124
|
return;
|
|
@@ -98,27 +128,31 @@ const ToasterComponent = (0, react_1.forwardRef)(({ className, ...props }, ref)
|
|
|
98
128
|
}
|
|
99
129
|
replacementTimerRef.current = setTimeout(() => {
|
|
100
130
|
replacementTimerRef.current = null;
|
|
101
|
-
|
|
131
|
+
setCurrentToastOptions(normalizedOptions);
|
|
102
132
|
}, timeoutDuration);
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
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 />.
|
|
107
140
|
(0, react_1.useLayoutEffect)(() => {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
141
|
+
return subscribeToToastStore((options) => {
|
|
142
|
+
if (options) {
|
|
143
|
+
showRenderedToast(options);
|
|
144
|
+
return;
|
|
112
145
|
}
|
|
113
|
-
|
|
114
|
-
|
|
146
|
+
closeRenderedToast();
|
|
147
|
+
});
|
|
148
|
+
}, [closeRenderedToast, showRenderedToast]);
|
|
115
149
|
// Delay the enter transition until after mount so the DOM can paint the
|
|
116
150
|
// offscreen starting position before we slide the toast into view.
|
|
117
151
|
(0, react_1.useEffect)(() => {
|
|
118
152
|
if (toastOptions && !isVisible) {
|
|
119
153
|
enterAnimationFrameRef.current = requestAnimationFrame(() => {
|
|
120
154
|
enterAnimationFrameRef.current = requestAnimationFrame(() => {
|
|
121
|
-
|
|
155
|
+
setCurrentIsVisible(true);
|
|
122
156
|
enterAnimationFrameRef.current = null;
|
|
123
157
|
});
|
|
124
158
|
});
|
|
@@ -126,27 +160,29 @@ const ToasterComponent = (0, react_1.forwardRef)(({ className, ...props }, ref)
|
|
|
126
160
|
return () => {
|
|
127
161
|
clearPendingTimers();
|
|
128
162
|
};
|
|
129
|
-
}, [toastOptions]); // intentionally omit isVisible — only react to new toast options
|
|
163
|
+
}, [clearPendingTimers, setCurrentIsVisible, toastOptions]); // intentionally omit isVisible — only react to new toast options
|
|
130
164
|
// Auto-dismiss once the toast is visible, unless the caller requested a
|
|
131
165
|
// persistent toast.
|
|
132
166
|
(0, react_1.useEffect)(() => {
|
|
133
167
|
if (isVisible && toastOptions && !toastOptions.hasNoTimeout) {
|
|
134
168
|
autoDismissTimerRef.current = setTimeout(() => {
|
|
135
169
|
autoDismissTimerRef.current = null;
|
|
136
|
-
|
|
170
|
+
clearStoreToastOptions();
|
|
137
171
|
}, Toast_constants_1.TOAST_VISIBILITY_DURATION);
|
|
138
172
|
return () => {
|
|
139
173
|
clearPendingTimers();
|
|
140
174
|
};
|
|
141
175
|
}
|
|
142
176
|
return undefined;
|
|
143
|
-
}, [isVisible]);
|
|
177
|
+
}, [clearPendingTimers, isVisible, toastOptions]);
|
|
144
178
|
(0, react_1.useEffect)(() => {
|
|
145
179
|
return () => {
|
|
146
180
|
clearPendingTimers();
|
|
147
181
|
pendingToastRef.current = undefined;
|
|
182
|
+
toastOptionsRef.current = undefined;
|
|
183
|
+
isVisibleRef.current = false;
|
|
148
184
|
};
|
|
149
|
-
}, []);
|
|
185
|
+
}, [clearPendingTimers]);
|
|
150
186
|
if (!toastOptions) {
|
|
151
187
|
return null;
|
|
152
188
|
}
|
|
@@ -159,16 +195,16 @@ const ToasterComponent = (0, react_1.forwardRef)(({ className, ...props }, ref)
|
|
|
159
195
|
: 'translateY(calc(100% + 16px))',
|
|
160
196
|
} },
|
|
161
197
|
react_1.default.createElement(Toast_1.Toast, { ...toastProps, className: toastClassName, onClose: () => {
|
|
162
|
-
|
|
198
|
+
clearStoreToastOptions();
|
|
163
199
|
toastOnClose?.();
|
|
164
200
|
} }))));
|
|
165
201
|
});
|
|
166
202
|
ToasterComponent.displayName = 'Toaster';
|
|
167
203
|
exports.Toaster = ToasterComponent;
|
|
168
204
|
exports.toast = ((options) => {
|
|
169
|
-
|
|
205
|
+
setStoreToastOptions(options);
|
|
170
206
|
});
|
|
171
207
|
exports.toast.dismiss = () => {
|
|
172
|
-
|
|
208
|
+
clearStoreToastOptions();
|
|
173
209
|
};
|
|
174
210
|
//# sourceMappingURL=Toaster.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAOe;AAGf,uDAA+C;AAE/C,uCAAgC;AAChC,2DAG2B;AAQ3B,IAAI,aAAa,GAAwC,IAAI,CAAC;AAE9D,MAAM,mBAAmB,GAAG,CAAC,MAA2B,EAAc,EAAE;IACtE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE;QAC3B,MAAM,UAAU,GAAG,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC;QACxE,MAAM,IAAI,KAAK,CACb,GAAG,UAAU,sFAAsF,CACpG,CAAC;KACH;IACD,OAAO,aAAa,CAAC,OAAO,CAAC;AAC/B,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EACrB,YAAY,EAAE,aAAa,EAC3B,GAAG,UAAU,EACA,EAAc,EAAE,CAAC,UAAU,CAAC;AAE3C,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EACjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAC9C,SAAS,CACV,CAAC;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAChC,IAAI,CACL,CAAC;IACF,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAChC,IAAI,CACL,CAAC;IACF,MAAM,YAAY,GAAG,IAAA,cAAM,EAAuC,IAAI,CAAC,CAAC;IACxE,MAAM,sBAAsB,GAAG,IAAA,cAAM,EAAgB,IAAI,CAAC,CAAC;IAC3D,MAAM,eAAe,GAAG,IAAA,cAAM,EAA2B,SAAS,CAAC,CAAC;IACpE,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAEjD,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,mBAAmB,CAAC,OAAO,KAAK,IAAI,EAAE;YACxC,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;YAC1C,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;SACpC;QACD,IAAI,mBAAmB,CAAC,OAAO,KAAK,IAAI,EAAE;YACxC,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;YAC1C,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;SACpC;QACD,IAAI,YAAY,CAAC,OAAO,KAAK,IAAI,EAAE;YACjC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YACnC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;SAC7B;QACD,IAAI,sBAAsB,CAAC,OAAO,KAAK,IAAI,EAAE;YAC3C,oBAAoB,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;YACrD,sBAAsB,CAAC,OAAO,GAAG,IAAI,CAAC;SACvC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,kBAAkB,EAAE,CAAC;QACrB,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACpC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACrC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,eAAe,CAAC,SAAS,CAAC,CAAC;QAC7B,CAAC,EAAE,0CAAwB,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,4EAA4E;IAC5E,0EAA0E;IAC1E,2DAA2D;IAC3D,MAAM,SAAS,GAAG,CAAC,OAAqB,EAAE,EAAE;QAC1C,MAAM,iBAAiB,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,CAAC;QAC9D,MAAM,eAAe,GAAG,CAAC,CAAC;QAE1B,IAAI,YAAY,EAAE;YAChB,eAAe,CAAC,OAAO,GAAG,iBAAiB,CAAC;YAC5C,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,IAAI,YAAY,CAAC,OAAO,KAAK,IAAI,EAAE;gBACjC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;gBACnC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;aAC7B;YACD,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACrC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC5B,eAAe,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;gBACzC,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;YACtC,CAAC,EAAE,0CAAwB,CAAC,CAAC;YAC7B,OAAO;SACR;QAED,IAAI,mBAAmB,CAAC,OAAO,KAAK,IAAI,EAAE;YACxC,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;SAC3C;QAED,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5C,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;YACnC,eAAe,CAAC,iBAAiB,CAAC,CAAC;QACrC,CAAC,EAAE,eAAe,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,QAAQ,CAAC,OAAO,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;IAE7C,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAqB,CAAC,CAAC;IAE/D,wEAAwE;IACxE,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,aAAa,GAAG,QAAQ,CAAC;QACzB,OAAO,GAAG,EAAE;YACV,IAAI,aAAa,KAAK,QAAQ,EAAE;gBAC9B,aAAa,GAAG,IAAI,CAAC;aACtB;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,wEAAwE;IACxE,mEAAmE;IACnE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,YAAY,IAAI,CAAC,SAAS,EAAE;YAC9B,sBAAsB,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBAC1D,sBAAsB,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;oBAC1D,YAAY,CAAC,IAAI,CAAC,CAAC;oBACnB,sBAAsB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACxC,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,GAAG,EAAE;YACV,kBAAkB,EAAE,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iEAAiE;IAErF,wEAAwE;IACxE,oBAAoB;IACpB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,YAAY,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE;YAC3D,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5C,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACnC,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;YACjC,CAAC,EAAE,2CAAyB,CAAC,CAAC;YAC9B,OAAO,GAAG,EAAE;gBACV,kBAAkB,EAAE,CAAC;YACvB,CAAC,CAAC;SACH;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,2EAA2E;IAE5F,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,kBAAkB,EAAE,CAAC;YACrB,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EACJ,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,cAAc,EACzB,GAAG,UAAU,EACd,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;IAEhC,OAAO,CACL,uCACE,IAAI,EAAC,QAAQ,eACH,QAAQ,iBACN,MAAM,EAClB,SAAS,EAAE,IAAA,kBAAO,EAChB,2EAA2E,EAC3E,SAAS,CACV,KACG,KAAK;QAET,uCACE,SAAS,EAAC,6DAA6D,EACvE,KAAK,EAAE;gBACL,kBAAkB,EAAE,GAAG,0CAAwB,IAAI;gBACnD,SAAS,EAAE,SAAS;oBAClB,CAAC,CAAC,eAAe;oBACjB,CAAC,CAAC,+BAA+B;aACpC;YAED,8BAAC,aAAK,OACA,UAAU,EACd,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,UAAU,EAAE,CAAC;oBACb,YAAY,EAAE,EAAE,CAAC;gBACnB,CAAC,GACD,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,SAAS,CAAC;AAM5B,QAAA,OAAO,GAAG,gBAAgB,CAAC;AAE3B,QAAA,KAAK,GAAG,CAAC,CAAC,OAAqB,EAAE,EAAE;IAC9C,mBAAmB,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;AAClD,CAAC,CAAkB,CAAC;AAEpB,aAAK,CAAC,OAAO,GAAG,GAAG,EAAE;IACnB,mBAAmB,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;AAC9C,CAAC,CAAC","sourcesContent":["import React, {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport type { RefObject } 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\nlet registeredRef: RefObject<ToasterRef | null> | null = null;\n\nconst assertRegisteredRef = (method: 'dismiss' | 'toast'): ToasterRef => {\n if (!registeredRef?.current) {\n const invocation = method === 'toast' ? 'toast()' : `toast.${method}()`;\n throw new Error(\n `${invocation} called before <Toaster /> mounted. Render <Toaster /> once at the root of your app.`,\n );\n }\n return registeredRef.current;\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 [isVisible, setIsVisible] = useState(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 const innerRef = useRef<ToasterRef | null>(null);\n\n const clearPendingTimers = () => {\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 closeToast = () => {\n clearPendingTimers();\n pendingToastRef.current = undefined;\n setIsVisible(false);\n exitTimerRef.current = setTimeout(() => {\n exitTimerRef.current = null;\n setToastOptions(undefined);\n }, TOAST_ANIMATION_DURATION);\n };\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 mounted Toaster instance.\n const showToast = (options: ToastOptions) => {\n const normalizedOptions = { hasNoTimeout: false, ...options };\n const timeoutDuration = 0;\n\n if (toastOptions) {\n pendingToastRef.current = normalizedOptions;\n setIsVisible(false);\n if (exitTimerRef.current !== null) {\n clearTimeout(exitTimerRef.current);\n exitTimerRef.current = null;\n }\n exitTimerRef.current = setTimeout(() => {\n exitTimerRef.current = null;\n setToastOptions(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 setToastOptions(normalizedOptions);\n }, timeoutDuration);\n };\n\n innerRef.current = { closeToast, showToast };\n\n useImperativeHandle(ref, () => innerRef.current as ToasterRef);\n\n // Register the mounted instance so toast() can be called from anywhere.\n useLayoutEffect(() => {\n registeredRef = innerRef;\n return () => {\n if (registeredRef === innerRef) {\n registeredRef = null;\n }\n };\n }, []);\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 setIsVisible(true);\n enterAnimationFrameRef.current = null;\n });\n });\n }\n return () => {\n clearPendingTimers();\n };\n }, [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 innerRef.current?.closeToast();\n }, TOAST_VISIBILITY_DURATION);\n return () => {\n clearPendingTimers();\n };\n }\n return undefined;\n }, [isVisible]); // intentionally omit toastOptions — timer fires once per visibility change\n\n useEffect(() => {\n return () => {\n clearPendingTimers();\n pendingToastRef.current = undefined;\n };\n }, []);\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 closeToast();\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 assertRegisteredRef('toast').showToast(options);\n}) as ToastFunction;\n\ntoast.dismiss = () => {\n assertRegisteredRef('dismiss').closeToast();\n};\n"]}
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
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"}
|