@metamask-previews/design-system-react 0.24.0-preview.f5c2542 → 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 +7 -1
- package/dist/components/Toast/Toast.cjs.map +1 -1
- package/dist/components/Toast/Toast.constants.cjs +6 -4
- package/dist/components/Toast/Toast.constants.cjs.map +1 -1
- package/dist/components/Toast/Toast.constants.d.cts +1 -3
- package/dist/components/Toast/Toast.constants.d.cts.map +1 -1
- package/dist/components/Toast/Toast.constants.d.mts +1 -3
- package/dist/components/Toast/Toast.constants.d.mts.map +1 -1
- package/dist/components/Toast/Toast.constants.mjs +3 -3
- package/dist/components/Toast/Toast.constants.mjs.map +1 -1
- package/dist/components/Toast/Toast.d.cts.map +1 -1
- package/dist/components/Toast/Toast.d.mts.map +1 -1
- package/dist/components/Toast/Toast.mjs +7 -1
- package/dist/components/Toast/Toast.mjs.map +1 -1
- package/dist/components/Toast/Toast.types.cjs.map +1 -1
- package/dist/components/Toast/Toast.types.d.cts +4 -0
- package/dist/components/Toast/Toast.types.d.cts.map +1 -1
- package/dist/components/Toast/Toast.types.d.mts +4 -0
- package/dist/components/Toast/Toast.types.d.mts.map +1 -1
- package/dist/components/Toast/Toast.types.mjs.map +1 -1
- package/dist/components/Toast/Toaster.cjs +124 -54
- 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 +125 -55
- package/dist/components/Toast/Toaster.mjs.map +1 -1
- package/dist/components/Toast/index.cjs +1 -4
- package/dist/components/Toast/index.cjs.map +1 -1
- package/dist/components/Toast/index.d.cts +1 -2
- package/dist/components/Toast/index.d.cts.map +1 -1
- package/dist/components/Toast/index.d.mts +1 -2
- package/dist/components/Toast/index.d.mts.map +1 -1
- package/dist/components/Toast/index.mjs +0 -1
- package/dist/components/Toast/index.mjs.map +1 -1
- package/dist/components/index.cjs +13 -4
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +9 -2
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +9 -2
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +4 -1
- 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"]}
|
|
@@ -42,6 +42,8 @@ const renderSeverityAccessory = ({ severity, startAccessory, iconProps, }) => {
|
|
|
42
42
|
return react_1.default.createElement(Icon_1.Icon, { name: name, color: color, size: types_1.IconSize.Lg, ...iconProps });
|
|
43
43
|
};
|
|
44
44
|
exports.Toast = (0, react_1.forwardRef)(({ actionButtonLabel, actionButtonOnClick, actionButtonProps, className, closeButtonProps, iconProps, onClose, severity = design_system_shared_1.ToastSeverity.Default, startAccessory, ...props }, ref) => {
|
|
45
|
+
// Only pass action props through when both the label and handler are set so
|
|
46
|
+
// BannerBase can keep its action button contract simple.
|
|
45
47
|
const resolvedActionProps = actionButtonLabel && actionButtonOnClick
|
|
46
48
|
? {
|
|
47
49
|
actionButtonLabel,
|
|
@@ -52,13 +54,17 @@ exports.Toast = (0, react_1.forwardRef)(({ actionButtonLabel, actionButtonOnClic
|
|
|
52
54
|
},
|
|
53
55
|
}
|
|
54
56
|
: {};
|
|
57
|
+
// Derive the close button config from the Toast API, keeping the button
|
|
58
|
+
// visible whenever the consumer provides dismiss behavior or overrides.
|
|
55
59
|
const resolvedCloseButtonProps = onClose || closeButtonProps
|
|
56
60
|
? {
|
|
57
61
|
ariaLabel: 'Close toast',
|
|
58
62
|
...closeButtonProps,
|
|
59
63
|
}
|
|
60
64
|
: undefined;
|
|
61
|
-
|
|
65
|
+
// Toast reuses BannerBase so the web surface stays aligned with the shared
|
|
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, startAccessory: renderSeverityAccessory({
|
|
62
68
|
severity,
|
|
63
69
|
startAccessory,
|
|
64
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,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,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,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"]}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TOAST_SEVERITY_ICON_MAP = exports.
|
|
3
|
+
exports.TOAST_SEVERITY_ICON_MAP = exports.TOAST_VISIBILITY_DURATION = exports.TOAST_ANIMATION_DURATION = void 0;
|
|
4
4
|
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
5
5
|
const types_1 = require("../../types/index.cjs");
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
exports.
|
|
6
|
+
var design_system_shared_2 = require("@metamask-previews/design-system-shared");
|
|
7
|
+
Object.defineProperty(exports, "TOAST_ANIMATION_DURATION", { enumerable: true, get: function () { return design_system_shared_2.TOAST_ANIMATION_DURATION; } });
|
|
8
|
+
Object.defineProperty(exports, "TOAST_VISIBILITY_DURATION", { enumerable: true, get: function () { return design_system_shared_2.TOAST_VISIBILITY_DURATION; } });
|
|
9
|
+
// TODO: Replace this map with a web IconAlert component once the shared
|
|
10
|
+
// alert-icon primitive exists in React.
|
|
9
11
|
exports.TOAST_SEVERITY_ICON_MAP = {
|
|
10
12
|
[design_system_shared_1.ToastSeverity.Success]: {
|
|
11
13
|
name: types_1.IconName.Confirmation,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.constants.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAwE;AAExE,iDAAkD;
|
|
1
|
+
{"version":3,"file":"Toast.constants.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAwE;AAExE,iDAAkD;AAElD,gFAGiD;AAF/C,gIAAA,wBAAwB,OAAA;AACxB,iIAAA,yBAAyB,OAAA;AAG3B,wEAAwE;AACxE,wCAAwC;AAC3B,QAAA,uBAAuB,GAAG;IACrC,CAAC,oCAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,gBAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,iBAAS,CAAC,cAAc;KAChC;IACD,CAAC,oCAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,gBAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,iBAAS,CAAC,cAAc;KAChC;IACD,CAAC,oCAAa,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,EAAE,gBAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,iBAAS,CAAC,YAAY;KAC9B;CACO,CAAC","sourcesContent":["import { ToastSeverity } from '@metamask-previews/design-system-shared';\n\nimport { IconColor, IconName } from '../../types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask-previews/design-system-shared';\n\n// TODO: Replace this map with a web IconAlert component once the shared\n// alert-icon primitive exists in React.\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: {\n name: IconName.Confirmation,\n color: IconColor.SuccessDefault,\n },\n [ToastSeverity.Warning]: {\n name: IconName.Danger,\n color: IconColor.WarningDefault,\n },\n [ToastSeverity.Danger]: {\n name: IconName.Danger,\n color: IconColor.ErrorDefault,\n },\n} as const;\n"]}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
/** Duration of the enter/exit CSS transition in milliseconds. */
|
|
3
|
-
export declare const TOAST_ANIMATION_DURATION = 200;
|
|
1
|
+
export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION, } from "@metamask-previews/design-system-shared";
|
|
4
2
|
export declare const TOAST_SEVERITY_ICON_MAP: {
|
|
5
3
|
readonly success: {
|
|
6
4
|
readonly name: "Confirmation";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAIA,
|
|
1
|
+
{"version":3,"file":"Toast.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,gDAAgD;AAIjD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAa1B,CAAC"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
/** Duration of the enter/exit CSS transition in milliseconds. */
|
|
3
|
-
export declare const TOAST_ANIMATION_DURATION = 200;
|
|
1
|
+
export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION, } from "@metamask-previews/design-system-shared";
|
|
4
2
|
export declare const TOAST_SEVERITY_ICON_MAP: {
|
|
5
3
|
readonly success: {
|
|
6
4
|
readonly name: "Confirmation";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAIA,
|
|
1
|
+
{"version":3,"file":"Toast.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,gDAAgD;AAIjD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAa1B,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ToastSeverity } from "@metamask-previews/design-system-shared";
|
|
2
2
|
import { IconColor, IconName } from "../../types/index.mjs";
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION } from "@metamask-previews/design-system-shared";
|
|
4
|
+
// TODO: Replace this map with a web IconAlert component once the shared
|
|
5
|
+
// alert-icon primitive exists in React.
|
|
6
6
|
export const TOAST_SEVERITY_ICON_MAP = {
|
|
7
7
|
[ToastSeverity.Success]: {
|
|
8
8
|
name: IconName.Confirmation,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.constants.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gDAAgD;AAExE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,
|
|
1
|
+
{"version":3,"file":"Toast.constants.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gDAAgD;AAExE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EAC1B,gDAAgD;AAEjD,wEAAwE;AACxE,wCAAwC;AACxC,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,QAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,QAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,EAAE,QAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,SAAS,CAAC,YAAY;KAC9B;CACO,CAAC","sourcesContent":["import { ToastSeverity } from '@metamask-previews/design-system-shared';\n\nimport { IconColor, IconName } from '../../types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask-previews/design-system-shared';\n\n// TODO: Replace this map with a web IconAlert component once the shared\n// alert-icon primitive exists in React.\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: {\n name: IconName.Confirmation,\n color: IconColor.SuccessDefault,\n },\n [ToastSeverity.Warning]: {\n name: IconName.Danger,\n color: IconColor.WarningDefault,\n },\n [ToastSeverity.Danger]: {\n name: IconName.Danger,\n color: IconColor.ErrorDefault,\n },\n} as const;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAoBhD,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Toast.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAoBhD,eAAO,MAAM,KAAK,gGA6DjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAoBhD,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Toast.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAoBhD,eAAO,MAAM,KAAK,gGA6DjB,CAAC"}
|
|
@@ -23,6 +23,8 @@ const renderSeverityAccessory = ({ severity, startAccessory, iconProps, }) => {
|
|
|
23
23
|
return React.createElement(Icon, { name: name, color: color, size: IconSize.Lg, ...iconProps });
|
|
24
24
|
};
|
|
25
25
|
export const Toast = forwardRef(({ actionButtonLabel, actionButtonOnClick, actionButtonProps, className, closeButtonProps, iconProps, onClose, severity = ToastSeverity.Default, startAccessory, ...props }, ref) => {
|
|
26
|
+
// Only pass action props through when both the label and handler are set so
|
|
27
|
+
// BannerBase can keep its action button contract simple.
|
|
26
28
|
const resolvedActionProps = actionButtonLabel && actionButtonOnClick
|
|
27
29
|
? {
|
|
28
30
|
actionButtonLabel,
|
|
@@ -33,13 +35,17 @@ export const Toast = forwardRef(({ actionButtonLabel, actionButtonOnClick, actio
|
|
|
33
35
|
},
|
|
34
36
|
}
|
|
35
37
|
: {};
|
|
38
|
+
// Derive the close button config from the Toast API, keeping the button
|
|
39
|
+
// visible whenever the consumer provides dismiss behavior or overrides.
|
|
36
40
|
const resolvedCloseButtonProps = onClose || closeButtonProps
|
|
37
41
|
? {
|
|
38
42
|
ariaLabel: 'Close toast',
|
|
39
43
|
...closeButtonProps,
|
|
40
44
|
}
|
|
41
45
|
: undefined;
|
|
42
|
-
|
|
46
|
+
// Toast reuses BannerBase so the web surface stays aligned with the shared
|
|
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, startAccessory: renderSeverityAccessory({
|
|
43
49
|
severity,
|
|
44
50
|
startAccessory,
|
|
45
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,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,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.types.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ToastPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon';\n\ntype ToastCloseButtonProps = Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onClick'\n>;\n\n/**\n * Props for the Toast visual component.\n * Extends the platform BannerBase props with severity and an icon override.\n * `onClose` is simplified to `() => void` (no MouseEvent) to align with the\n * React Native API and the imperative `toast()` pattern.\n */\nexport type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' | 'onClose'> &\n ToastPropsShared & {\n /**\n * Optional handler called when the close button is pressed.\n * When provided, a close button is shown.\n */\n onClose?: () => void;\n /**\n * Optional props passed to the severity `Icon`.\n * Only used when `severity` is not `Default` and `startAccessory` is not provided.\n */\n iconProps?: Omit<IconProps, 'name' | 'color'>;\n /**\n * Optional props for the close `ButtonIcon`.\n * `ariaLabel` defaults to `'Close toast'`.\n */\n closeButtonProps?: ToastCloseButtonProps;\n };\n\n/**\n * Options passed to the imperative `toast(...)` API.\n */\nexport type ToastOptions = ToastProps & {\n /**\n * When true the toast stays visible until explicitly dismissed.\n * Defaults to false.\n */\n hasNoTimeout?: boolean;\n};\n\n/**\n * Imperative handle exposed by `<Toaster ref={...} />`.\n */\nexport type ToasterRef = {\n showToast: (options: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/**\n * Props for the `<Toaster />` container component.\n */\nexport type ToasterProps = {\n /**\n * Optional extra CSS classes applied to the fixed outer container.\n */\n className?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;\n"]}
|
|
1
|
+
{"version":3,"file":"Toast.types.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ToastPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon';\n\ntype ToastCloseButtonProps = Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onClick'\n>;\n\n/**\n * Props for the Toast visual component.\n * Extends the platform BannerBase props with severity and an icon override.\n * `onClose` is simplified to `() => void` (no MouseEvent) to align with the\n * React Native API and the imperative `toast()` pattern.\n */\nexport type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' | 'onClose'> &\n ToastPropsShared & {\n /**\n * Optional handler called when the close button is pressed.\n * When provided, a close button is shown.\n */\n onClose?: () => void;\n /**\n * Optional props passed to the severity `Icon`.\n * Only used when `severity` is not `Default` and `startAccessory` is not provided.\n */\n iconProps?: Omit<IconProps, 'name' | 'color'>;\n /**\n * Optional props for the close `ButtonIcon`.\n * `ariaLabel` defaults to `'Close toast'`.\n */\n closeButtonProps?: ToastCloseButtonProps;\n /**\n * Optional test identifier forwarded to the root Toast element.\n */\n 'data-testid'?: string;\n };\n\n/**\n * Options passed to the imperative `toast(...)` API.\n */\nexport type ToastOptions = ToastProps & {\n /**\n * When true the toast stays visible until explicitly dismissed.\n * Defaults to false.\n */\n hasNoTimeout?: boolean;\n};\n\n/**\n * Imperative handle exposed by `<Toaster ref={...} />`.\n */\nexport type ToasterRef = {\n showToast: (options: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/**\n * Props for the `<Toaster />` container component.\n */\nexport type ToasterProps = {\n /**\n * Optional extra CSS classes applied to the fixed outer container.\n */\n className?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;\n"]}
|
|
@@ -25,6 +25,10 @@ export type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' | 'onClose'> &
|
|
|
25
25
|
* `ariaLabel` defaults to `'Close toast'`.
|
|
26
26
|
*/
|
|
27
27
|
closeButtonProps?: ToastCloseButtonProps;
|
|
28
|
+
/**
|
|
29
|
+
* Optional test identifier forwarded to the root Toast element.
|
|
30
|
+
*/
|
|
31
|
+
'data-testid'?: string;
|
|
28
32
|
};
|
|
29
33
|
/**
|
|
30
34
|
* Options passed to the imperative `toast(...)` API.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.types.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,qBAAqB,GAAG,IAAI,CAC/B,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,SAAS,CAAC,GAC5E,gBAAgB,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Toast.types.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,qBAAqB,GAAG,IAAI,CAC/B,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,SAAS,CAAC,GAC5E,gBAAgB,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC"}
|
|
@@ -25,6 +25,10 @@ export type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' | 'onClose'> &
|
|
|
25
25
|
* `ariaLabel` defaults to `'Close toast'`.
|
|
26
26
|
*/
|
|
27
27
|
closeButtonProps?: ToastCloseButtonProps;
|
|
28
|
+
/**
|
|
29
|
+
* Optional test identifier forwarded to the root Toast element.
|
|
30
|
+
*/
|
|
31
|
+
'data-testid'?: string;
|
|
28
32
|
};
|
|
29
33
|
/**
|
|
30
34
|
* Options passed to the imperative `toast(...)` API.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.types.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,qBAAqB,GAAG,IAAI,CAC/B,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,SAAS,CAAC,GAC5E,gBAAgB,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Toast.types.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAEhF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,qBAAqB,GAAG,IAAI,CAC/B,WAAW,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChD,SAAS,CACV,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,SAAS,CAAC,GAC5E,gBAAgB,GAAG;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.types.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ToastPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon';\n\ntype ToastCloseButtonProps = Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onClick'\n>;\n\n/**\n * Props for the Toast visual component.\n * Extends the platform BannerBase props with severity and an icon override.\n * `onClose` is simplified to `() => void` (no MouseEvent) to align with the\n * React Native API and the imperative `toast()` pattern.\n */\nexport type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' | 'onClose'> &\n ToastPropsShared & {\n /**\n * Optional handler called when the close button is pressed.\n * When provided, a close button is shown.\n */\n onClose?: () => void;\n /**\n * Optional props passed to the severity `Icon`.\n * Only used when `severity` is not `Default` and `startAccessory` is not provided.\n */\n iconProps?: Omit<IconProps, 'name' | 'color'>;\n /**\n * Optional props for the close `ButtonIcon`.\n * `ariaLabel` defaults to `'Close toast'`.\n */\n closeButtonProps?: ToastCloseButtonProps;\n };\n\n/**\n * Options passed to the imperative `toast(...)` API.\n */\nexport type ToastOptions = ToastProps & {\n /**\n * When true the toast stays visible until explicitly dismissed.\n * Defaults to false.\n */\n hasNoTimeout?: boolean;\n};\n\n/**\n * Imperative handle exposed by `<Toaster ref={...} />`.\n */\nexport type ToasterRef = {\n showToast: (options: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/**\n * Props for the `<Toaster />` container component.\n */\nexport type ToasterProps = {\n /**\n * Optional extra CSS classes applied to the fixed outer container.\n */\n className?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;\n"]}
|
|
1
|
+
{"version":3,"file":"Toast.types.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ToastPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon';\n\ntype ToastCloseButtonProps = Omit<\n NonNullable<BannerBaseProps['closeButtonProps']>,\n 'onClick'\n>;\n\n/**\n * Props for the Toast visual component.\n * Extends the platform BannerBase props with severity and an icon override.\n * `onClose` is simplified to `() => void` (no MouseEvent) to align with the\n * React Native API and the imperative `toast()` pattern.\n */\nexport type ToastProps = Omit<BannerBaseProps, 'closeButtonProps' | 'onClose'> &\n ToastPropsShared & {\n /**\n * Optional handler called when the close button is pressed.\n * When provided, a close button is shown.\n */\n onClose?: () => void;\n /**\n * Optional props passed to the severity `Icon`.\n * Only used when `severity` is not `Default` and `startAccessory` is not provided.\n */\n iconProps?: Omit<IconProps, 'name' | 'color'>;\n /**\n * Optional props for the close `ButtonIcon`.\n * `ariaLabel` defaults to `'Close toast'`.\n */\n closeButtonProps?: ToastCloseButtonProps;\n /**\n * Optional test identifier forwarded to the root Toast element.\n */\n 'data-testid'?: string;\n };\n\n/**\n * Options passed to the imperative `toast(...)` API.\n */\nexport type ToastOptions = ToastProps & {\n /**\n * When true the toast stays visible until explicitly dismissed.\n * Defaults to false.\n */\n hasNoTimeout?: boolean;\n};\n\n/**\n * Imperative handle exposed by `<Toaster ref={...} />`.\n */\nexport type ToasterRef = {\n showToast: (options: ToastOptions) => void;\n closeToast: () => void;\n};\n\n/**\n * Props for the `<Toaster />` container component.\n */\nexport type ToasterProps = {\n /**\n * Optional extra CSS classes applied to the fixed outer container.\n */\n className?: string;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;\n"]}
|