@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.
Files changed (148) hide show
  1. package/CHANGELOG.md +16 -1
  2. package/dist/components/AvatarBase/AvatarBase.cjs +1 -1
  3. package/dist/components/AvatarBase/AvatarBase.cjs.map +1 -1
  4. package/dist/components/AvatarBase/AvatarBase.mjs +1 -1
  5. package/dist/components/AvatarBase/AvatarBase.mjs.map +1 -1
  6. package/dist/components/AvatarFavicon/AvatarFavicon.cjs +1 -1
  7. package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map +1 -1
  8. package/dist/components/AvatarFavicon/AvatarFavicon.mjs +1 -1
  9. package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
  10. package/dist/components/AvatarNetwork/AvatarNetwork.cjs +1 -1
  11. package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
  12. package/dist/components/AvatarNetwork/AvatarNetwork.mjs +1 -1
  13. package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
  14. package/dist/components/AvatarToken/AvatarToken.cjs +2 -2
  15. package/dist/components/AvatarToken/AvatarToken.cjs.map +1 -1
  16. package/dist/components/AvatarToken/AvatarToken.mjs +2 -2
  17. package/dist/components/AvatarToken/AvatarToken.mjs.map +1 -1
  18. package/dist/components/FormTextField/FormTextField.cjs +38 -0
  19. package/dist/components/FormTextField/FormTextField.cjs.map +1 -0
  20. package/dist/components/FormTextField/FormTextField.d.cts +4 -0
  21. package/dist/components/FormTextField/FormTextField.d.cts.map +1 -0
  22. package/dist/components/FormTextField/FormTextField.d.mts +4 -0
  23. package/dist/components/FormTextField/FormTextField.d.mts.map +1 -0
  24. package/dist/components/FormTextField/FormTextField.mjs +19 -0
  25. package/dist/components/FormTextField/FormTextField.mjs.map +1 -0
  26. package/dist/components/FormTextField/FormTextField.types.cjs +3 -0
  27. package/dist/components/FormTextField/FormTextField.types.cjs.map +1 -0
  28. package/dist/components/FormTextField/FormTextField.types.d.cts +50 -0
  29. package/dist/components/FormTextField/FormTextField.types.d.cts.map +1 -0
  30. package/dist/components/FormTextField/FormTextField.types.d.mts +50 -0
  31. package/dist/components/FormTextField/FormTextField.types.d.mts.map +1 -0
  32. package/dist/components/FormTextField/FormTextField.types.mjs +2 -0
  33. package/dist/components/FormTextField/FormTextField.types.mjs.map +1 -0
  34. package/dist/components/FormTextField/index.cjs +6 -0
  35. package/dist/components/FormTextField/index.cjs.map +1 -0
  36. package/dist/components/FormTextField/index.d.cts +3 -0
  37. package/dist/components/FormTextField/index.d.cts.map +1 -0
  38. package/dist/components/FormTextField/index.d.mts +3 -0
  39. package/dist/components/FormTextField/index.d.mts.map +1 -0
  40. package/dist/components/FormTextField/index.mjs +2 -0
  41. package/dist/components/FormTextField/index.mjs.map +1 -0
  42. package/dist/components/Popover/Popover.cjs +129 -0
  43. package/dist/components/Popover/Popover.cjs.map +1 -0
  44. package/dist/components/Popover/Popover.constants.cjs +28 -0
  45. package/dist/components/Popover/Popover.constants.cjs.map +1 -0
  46. package/dist/components/Popover/Popover.constants.d.cts +12 -0
  47. package/dist/components/Popover/Popover.constants.d.cts.map +1 -0
  48. package/dist/components/Popover/Popover.constants.d.mts +12 -0
  49. package/dist/components/Popover/Popover.constants.d.mts.map +1 -0
  50. package/dist/components/Popover/Popover.constants.mjs +25 -0
  51. package/dist/components/Popover/Popover.constants.mjs.map +1 -0
  52. package/dist/components/Popover/Popover.d.cts +4 -0
  53. package/dist/components/Popover/Popover.d.cts.map +1 -0
  54. package/dist/components/Popover/Popover.d.mts +4 -0
  55. package/dist/components/Popover/Popover.d.mts.map +1 -0
  56. package/dist/components/Popover/Popover.mjs +110 -0
  57. package/dist/components/Popover/Popover.mjs.map +1 -0
  58. package/dist/components/Popover/Popover.types.cjs +33 -0
  59. package/dist/components/Popover/Popover.types.cjs.map +1 -0
  60. package/dist/components/Popover/Popover.types.d.cts +128 -0
  61. package/dist/components/Popover/Popover.types.d.cts.map +1 -0
  62. package/dist/components/Popover/Popover.types.d.mts +128 -0
  63. package/dist/components/Popover/Popover.types.d.mts.map +1 -0
  64. package/dist/components/Popover/Popover.types.mjs +30 -0
  65. package/dist/components/Popover/Popover.types.mjs.map +1 -0
  66. package/dist/components/Popover/index.cjs +9 -0
  67. package/dist/components/Popover/index.cjs.map +1 -0
  68. package/dist/components/Popover/index.d.cts +4 -0
  69. package/dist/components/Popover/index.d.cts.map +1 -0
  70. package/dist/components/Popover/index.d.mts +4 -0
  71. package/dist/components/Popover/index.d.mts.map +1 -0
  72. package/dist/components/Popover/index.mjs +3 -0
  73. package/dist/components/Popover/index.mjs.map +1 -0
  74. package/dist/components/TextArea/TextArea.cjs +37 -0
  75. package/dist/components/TextArea/TextArea.cjs.map +1 -0
  76. package/dist/components/TextArea/TextArea.constants.cjs +35 -0
  77. package/dist/components/TextArea/TextArea.constants.cjs.map +1 -0
  78. package/dist/components/TextArea/TextArea.constants.d.cts +28 -0
  79. package/dist/components/TextArea/TextArea.constants.d.cts.map +1 -0
  80. package/dist/components/TextArea/TextArea.constants.d.mts +28 -0
  81. package/dist/components/TextArea/TextArea.constants.d.mts.map +1 -0
  82. package/dist/components/TextArea/TextArea.constants.mjs +32 -0
  83. package/dist/components/TextArea/TextArea.constants.mjs.map +1 -0
  84. package/dist/components/TextArea/TextArea.d.cts +9 -0
  85. package/dist/components/TextArea/TextArea.d.cts.map +1 -0
  86. package/dist/components/TextArea/TextArea.d.mts +9 -0
  87. package/dist/components/TextArea/TextArea.d.mts.map +1 -0
  88. package/dist/components/TextArea/TextArea.mjs +18 -0
  89. package/dist/components/TextArea/TextArea.mjs.map +1 -0
  90. package/dist/components/TextArea/TextArea.types.cjs +3 -0
  91. package/dist/components/TextArea/TextArea.types.cjs.map +1 -0
  92. package/dist/components/TextArea/TextArea.types.d.cts +33 -0
  93. package/dist/components/TextArea/TextArea.types.d.cts.map +1 -0
  94. package/dist/components/TextArea/TextArea.types.d.mts +33 -0
  95. package/dist/components/TextArea/TextArea.types.d.mts.map +1 -0
  96. package/dist/components/TextArea/TextArea.types.mjs +2 -0
  97. package/dist/components/TextArea/TextArea.types.mjs.map +1 -0
  98. package/dist/components/TextArea/index.cjs +8 -0
  99. package/dist/components/TextArea/index.cjs.map +1 -0
  100. package/dist/components/TextArea/index.d.cts +4 -0
  101. package/dist/components/TextArea/index.d.cts.map +1 -0
  102. package/dist/components/TextArea/index.d.mts +4 -0
  103. package/dist/components/TextArea/index.d.mts.map +1 -0
  104. package/dist/components/TextArea/index.mjs +3 -0
  105. package/dist/components/TextArea/index.mjs.map +1 -0
  106. package/dist/components/TextFieldSearch/TextFieldSearch.cjs +40 -0
  107. package/dist/components/TextFieldSearch/TextFieldSearch.cjs.map +1 -0
  108. package/dist/components/TextFieldSearch/TextFieldSearch.d.cts +6 -0
  109. package/dist/components/TextFieldSearch/TextFieldSearch.d.cts.map +1 -0
  110. package/dist/components/TextFieldSearch/TextFieldSearch.d.mts +6 -0
  111. package/dist/components/TextFieldSearch/TextFieldSearch.d.mts.map +1 -0
  112. package/dist/components/TextFieldSearch/TextFieldSearch.mjs +21 -0
  113. package/dist/components/TextFieldSearch/TextFieldSearch.mjs.map +1 -0
  114. package/dist/components/TextFieldSearch/TextFieldSearch.types.cjs +3 -0
  115. package/dist/components/TextFieldSearch/TextFieldSearch.types.cjs.map +1 -0
  116. package/dist/components/TextFieldSearch/TextFieldSearch.types.d.cts +17 -0
  117. package/dist/components/TextFieldSearch/TextFieldSearch.types.d.cts.map +1 -0
  118. package/dist/components/TextFieldSearch/TextFieldSearch.types.d.mts +17 -0
  119. package/dist/components/TextFieldSearch/TextFieldSearch.types.d.mts.map +1 -0
  120. package/dist/components/TextFieldSearch/TextFieldSearch.types.mjs +2 -0
  121. package/dist/components/TextFieldSearch/TextFieldSearch.types.mjs.map +1 -0
  122. package/dist/components/TextFieldSearch/index.cjs +6 -0
  123. package/dist/components/TextFieldSearch/index.cjs.map +1 -0
  124. package/dist/components/TextFieldSearch/index.d.cts +3 -0
  125. package/dist/components/TextFieldSearch/index.d.cts.map +1 -0
  126. package/dist/components/TextFieldSearch/index.d.mts +3 -0
  127. package/dist/components/TextFieldSearch/index.d.mts.map +1 -0
  128. package/dist/components/TextFieldSearch/index.mjs +2 -0
  129. package/dist/components/TextFieldSearch/index.mjs.map +1 -0
  130. package/dist/components/Toast/Toast.cjs +1 -1
  131. package/dist/components/Toast/Toast.cjs.map +1 -1
  132. package/dist/components/Toast/Toast.mjs +1 -1
  133. package/dist/components/Toast/Toast.mjs.map +1 -1
  134. package/dist/components/Toast/Toaster.cjs +75 -39
  135. package/dist/components/Toast/Toaster.cjs.map +1 -1
  136. package/dist/components/Toast/Toaster.d.cts.map +1 -1
  137. package/dist/components/Toast/Toaster.d.mts.map +1 -1
  138. package/dist/components/Toast/Toaster.mjs +76 -40
  139. package/dist/components/Toast/Toaster.mjs.map +1 -1
  140. package/dist/components/index.cjs +13 -1
  141. package/dist/components/index.cjs.map +1 -1
  142. package/dist/components/index.d.cts +8 -0
  143. package/dist/components/index.d.cts.map +1 -1
  144. package/dist/components/index.d.mts +8 -0
  145. package/dist/components/index.d.mts.map +1 -1
  146. package/dist/components/index.mjs +4 -0
  147. package/dist/components/index.mjs.map +1 -1
  148. 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,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=TextFieldSearch.types.cjs.map
@@ -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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=TextFieldSearch.types.mjs.map
@@ -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,3 @@
1
+ export { TextFieldSearch } from "./TextFieldSearch.cjs";
2
+ export type { TextFieldSearchProps } from "./TextFieldSearch.types.cjs";
3
+ //# sourceMappingURL=index.d.cts.map
@@ -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,3 @@
1
+ export { TextFieldSearch } from "./TextFieldSearch.mjs";
2
+ export type { TextFieldSearchProps } from "./TextFieldSearch.types.mjs";
3
+ //# sourceMappingURL=index.d.mts.map
@@ -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,2 @@
1
+ export { TextFieldSearch } from "./TextFieldSearch.mjs";
2
+ //# sourceMappingURL=index.mjs.map
@@ -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 ? () => onClose() : undefined, startAccessory: renderSeverityAccessory({
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,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,EAC9C,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 ? () => onClose() : undefined}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
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 ? () => onClose() : undefined, startAccessory: renderSeverityAccessory({
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,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,EAC9C,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 ? () => onClose() : undefined}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
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 registeredRef = null;
32
- const assertRegisteredRef = (method) => {
33
- if (!registeredRef?.current) {
34
- const invocation = method === 'toast' ? 'toast()' : `toast.${method}()`;
35
- throw new Error(`${invocation} called before <Toaster /> mounted. Render <Toaster /> once at the root of your app.`);
36
- }
37
- return registeredRef.current;
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 innerRef = (0, react_1.useRef)(null);
49
- const clearPendingTimers = () => {
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 closeToast = () => {
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
- setIsVisible(false);
100
+ setCurrentIsVisible(false);
71
101
  exitTimerRef.current = setTimeout(() => {
72
102
  exitTimerRef.current = null;
73
- setToastOptions(undefined);
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 mounted Toaster instance.
79
- const showToast = (options) => {
80
- const normalizedOptions = { hasNoTimeout: false, ...options };
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 (toastOptions) {
112
+ if (toastOptionsRef.current) {
83
113
  pendingToastRef.current = normalizedOptions;
84
- setIsVisible(false);
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
- setToastOptions(pendingToastRef.current);
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
- setToastOptions(normalizedOptions);
131
+ setCurrentToastOptions(normalizedOptions);
102
132
  }, timeoutDuration);
103
- };
104
- innerRef.current = { closeToast, showToast };
105
- (0, react_1.useImperativeHandle)(ref, () => innerRef.current);
106
- // Register the mounted instance so toast() can be called from anywhere.
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
- registeredRef = innerRef;
109
- return () => {
110
- if (registeredRef === innerRef) {
111
- registeredRef = null;
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
- setIsVisible(true);
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
- innerRef.current?.closeToast();
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]); // intentionally omit toastOptions — timer fires once per visibility change
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
- closeToast();
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
- assertRegisteredRef('toast').showToast(options);
205
+ setStoreToastOptions(options);
170
206
  });
171
207
  exports.toast.dismiss = () => {
172
- assertRegisteredRef('dismiss').closeToast();
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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAQe;AAEf,uDAA+C;AAE/C,uCAAgC;AAChC,2DAG2B;AAU3B,IAAI,iBAA2C,CAAC;AAChD,MAAM,mBAAmB,GAAG,IAAI,GAAG,EAAsB,CAAC;AAE1D,MAAM,qBAAqB,GAAG,CAAC,OAAqB,EAAgB,EAAE,CAAC,CAAC;IACtE,YAAY,EAAE,KAAK;IACnB,GAAG,OAAO;CACX,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,mBAAmB,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAqB,EAAE,EAAE;IACrD,iBAAiB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACnD,oBAAoB,EAAE,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE;IAClC,iBAAiB,GAAG,SAAS,CAAC;IAC9B,oBAAoB,EAAE,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,QAA4B,EAAE,EAAE;IAC7D,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAClC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAE5B,OAAO,GAAG,EAAE;QACV,mBAAmB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC,CAAC;AACJ,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,eAAe,GAAG,IAAA,cAAM,EAA2B,SAAS,CAAC,CAAC;IACpE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IACnC,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;IAEpE,MAAM,sBAAsB,GAAG,IAAA,mBAAW,EACxC,CAAC,OAAiC,EAAE,EAAE;QACpC,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;QAClC,eAAe,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,mBAAmB,GAAG,IAAA,mBAAW,EAAC,CAAC,aAAsB,EAAE,EAAE;QACjE,YAAY,CAAC,OAAO,GAAG,aAAa,CAAC;QACrC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC1C,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,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC1C,IAAI,CAAC,eAAe,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YACrD,kBAAkB,EAAE,CAAC;YACrB,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;YACpC,OAAO;SACR;QAED,kBAAkB,EAAE,CAAC;QACrB,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACpC,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC3B,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACrC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,sBAAsB,CAAC,SAAS,CAAC,CAAC;QACpC,CAAC,EAAE,0CAAwB,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAEtE,4EAA4E;IAC5E,0EAA0E;IAC1E,4DAA4D;IAC5D,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACnC,CAAC,OAAqB,EAAE,EAAE;QACxB,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;QACzD,MAAM,eAAe,GAAG,CAAC,CAAC;QAE1B,IAAI,eAAe,CAAC,OAAO,EAAE;YAC3B,eAAe,CAAC,OAAO,GAAG,iBAAiB,CAAC;YAC5C,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC3B,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,sBAAsB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;gBAChD,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,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;QAC5C,CAAC,EAAE,eAAe,CAAC,CAAC;IACtB,CAAC,EACD,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAC9C,CAAC;IAEF,IAAA,2BAAmB,EACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB;QAClC,SAAS,EAAE,oBAAoB;KAChC,CAAC,EACF,EAAE,CACH,CAAC;IAEF,wEAAwE;IACxE,4DAA4D;IAC5D,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,OAAO,qBAAqB,CAAC,CAAC,OAAO,EAAE,EAAE;YACvC,IAAI,OAAO,EAAE;gBACX,iBAAiB,CAAC,OAAO,CAAC,CAAC;gBAC3B,OAAO;aACR;YAED,kBAAkB,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5C,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,mBAAmB,CAAC,IAAI,CAAC,CAAC;oBAC1B,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,kBAAkB,EAAE,mBAAmB,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,iEAAiE;IAE9H,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,sBAAsB,EAAE,CAAC;YAC3B,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,kBAAkB,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,kBAAkB,EAAE,CAAC;YACrB,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;YACpC,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;YACpC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,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,sBAAsB,EAAE,CAAC;oBACzB,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,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC,CAAkB,CAAC;AAEpB,aAAK,CAAC,OAAO,GAAG,GAAG,EAAE;IACnB,sBAAsB,EAAE,CAAC;AAC3B,CAAC,CAAC","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,KAON,cAAc;AAUf,OAAO,KAAK,EACV,YAAY,EAGZ,UAAU,EACX,0BAAsB;AAmMvB,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
+ {"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,KAON,cAAc;AAUf,OAAO,KAAK,EACV,YAAY,EAGZ,UAAU,EACX,0BAAsB;AAmMvB,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
+ {"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"}