@crystallize/design-system 1.24.15 → 1.24.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.24.16
+
+### Patch Changes
+
+- 50b5602: Add `id` prop to toast component so we can update the toast message without closing it
+
 ## 1.24.15
 
 ### Patch Changes

package/dist/index.d.ts

@@ -450,12 +450,13 @@ type ToastType = 'info' | 'error' | 'success' | 'warning';
 type ToastStylesProps = VariantProps<typeof toastStyles>;
 type ToastProps = Omit<React.ComponentProps<'div'>, 'title'> & Omit<ToastStylesProps, 'type'> & {
     title: React.ReactNode;
-    type?: ToastType;
     message?: React.ReactNode;
+    type?: ToastType;
+    id?: string;
     timeout?: number;
 };
 declare const toast: {
-    ({ title, message, type, timeout }: ToastProps): string;
+    ({ title, message, id, type, timeout }: ToastProps): string;
     dismiss: (id?: string | number | undefined) => string | number;
 };
 

package/dist/index.js

@@ -40486,12 +40486,12 @@ var iconMap = {
   success: Icon.CheckWithCircle,
   warning: Icon.Warning
 };
-var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
+var toast = ({ title, message, id, type = "success", timeout = 6e3 }) => {
   const ToastIcon = iconMap[type];
   const withMessage = !!message;
-  const toastId = Date.now().toString();
+  const toastId = id ?? Date.now().toString();
   import_sonner.toast.custom(
-    (id) => /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", {
+    (id2) => /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", {
       "data-testid": `toast-${type}`,
       className: (0, import_class_variance_authority23.cx)(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
@@ -40516,7 +40516,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
         /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", {
           className: "c-toast-close",
           children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(IconButton, {
-            onClick: () => import_sonner.toast.dismiss(id),
+            onClick: () => import_sonner.toast.dismiss(id2),
             size: "xs",
             children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(Icon.Cancel, {
               width: 12,

package/dist/index.mjs

@@ -516,12 +516,12 @@ var iconMap = {
   success: Icon.CheckWithCircle,
   warning: Icon.Warning
 };
-var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
+var toast = ({ title, message, id, type = "success", timeout = 6e3 }) => {
   const ToastIcon = iconMap[type];
   const withMessage = !!message;
-  const toastId = Date.now().toString();
+  const toastId = id ?? Date.now().toString();
   sonnerToast.custom(
-    (id) => /* @__PURE__ */ jsxs9("div", {
+    (id2) => /* @__PURE__ */ jsxs9("div", {
       "data-testid": `toast-${type}`,
       className: cx8(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
@@ -546,7 +546,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
         /* @__PURE__ */ jsx16("div", {
           className: "c-toast-close",
           children: /* @__PURE__ */ jsx16(IconButton, {
-            onClick: () => sonnerToast.dismiss(id),
+            onClick: () => sonnerToast.dismiss(id2),
             size: "xs",
             children: /* @__PURE__ */ jsx16(Icon.Cancel, {
               width: 12,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.15",
+  "version": "1.24.16",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/toast/toast.tsx

@@ -24,8 +24,9 @@ type ToastStylesProps = VariantProps<typeof toastStyles>;
 export type ToastProps = Omit<React.ComponentProps<'div'>, 'title'> &
   Omit<ToastStylesProps, 'type'> & {
     title: React.ReactNode;
-    type?: ToastType;
     message?: React.ReactNode;
+    type?: ToastType;
+    id?: string;
     timeout?: number;
   };
 
@@ -36,10 +37,10 @@ const iconMap = {
   warning: Icon.Warning,
 };
 
-export const toast = ({ title, message, type = 'success', timeout = 6000 }: ToastProps) => {
+export const toast = ({ title, message, id, type = 'success', timeout = 6000 }: ToastProps) => {
   const ToastIcon = iconMap[type];
   const withMessage = !!message;
-  const toastId = Date.now().toString();
+  const toastId = id ?? Date.now().toString();
 
   sonnerToast.custom(
     id => (