@choice-ui/react 1.6.9 → 1.7.1

package/dist/components/toast/dist/index.d.ts

@@ -78,12 +78,20 @@ interface ToastData {
     id: string;
     type: ToastType;
     variant?: ToastVariant;
+    /**
+     * Title content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
     title?: React.ReactNode;
-    /** HTML string for title - rendered with dangerouslySetInnerHTML */
-    titleHtml?: string;
+    /**
+     * Description content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
     description?: React.ReactNode;
-    /** HTML string for description - rendered with dangerouslySetInnerHTML */
-    descriptionHtml?: string;
     duration?: number;
     icon?: React.ReactNode;
     action?: {
@@ -105,9 +113,13 @@ interface ToastData {
 interface ToastOptions {
     id?: string;
     variant?: ToastVariant;
+    /**
+     * Description content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
     description?: React.ReactNode;
-    /** HTML string for description - rendered with dangerouslySetInnerHTML */
-    descriptionHtml?: string;
     duration?: number;
     icon?: React.ReactNode;
     action?: {

package/dist/components/toast/src/components/toaster-item.js

@@ -45,6 +45,10 @@ const TOAST_ICONS = {
 function getToastIcon(type) {
   return TOAST_ICONS[type] ?? null;
 }
+const HTML_TAG_REGEX = /<[a-z][\s\S]*>/i;
+function isHtmlString(content) {
+  return typeof content === "string" && HTML_TAG_REGEX.test(content);
+}
 const ToasterItem = memo(
   forwardRef(function ToasterItem2({
     toast,
@@ -172,7 +176,7 @@ const ToasterItem = memo(
       setSwipeOffset({ x: 0, y: 0 });
       setSwipeDirection(null);
     });
-    const displayIcon = getToastIcon(toast.type);
+    const displayIcon = toast.icon ?? getToastIcon(toast.type);
     const isBehind = index > 0 && !expanded;
     const isTop = position.startsWith("top");
     const scale = expanded ? 1 : Math.max(0, 1 - index * 0.05);
@@ -208,7 +212,7 @@ const ToasterItem = memo(
         type: toast.type,
         position,
         hasActions: !!toast.action || !!toast.cancel,
-        hasDescription: !!(toast.description || toast.descriptionHtml),
+        hasDescription: !!toast.description,
         hasIcon: !!displayIcon,
         behind: isBehind,
         expanded,
@@ -221,7 +225,6 @@ const ToasterItem = memo(
         toast.action,
         toast.cancel,
         toast.description,
-        toast.descriptionHtml,
         displayIcon,
         isBehind,
         expanded,
@@ -278,29 +281,22 @@ const ToasterItem = memo(
           id: titleId,
           className: tcx(tv.title(), slotProps.titleClassName),
           style: slotProps.titleStyle,
-          children: toast.title
+          ...isHtmlString(toast.title) ? { dangerouslySetInnerHTML: { __html: toast.title } } : { children: toast.title }
         }
       );
     }, [toast.title, titleId, tv, slotProps.titleClassName, slotProps.titleStyle]);
     const descriptionContent = useMemo(() => {
-      if (!toast.description && !toast.descriptionHtml) return null;
+      if (!toast.description) return null;
       return /* @__PURE__ */ jsx(
         "div",
         {
           id: descriptionId,
           className: tcx(tv.description(), slotProps.descriptionClassName),
           style: slotProps.descriptionStyle,
-          ...toast.descriptionHtml ? { dangerouslySetInnerHTML: { __html: toast.descriptionHtml } } : { children: toast.description }
+          ...isHtmlString(toast.description) ? { dangerouslySetInnerHTML: { __html: toast.description } } : { children: toast.description }
         }
       );
-    }, [
-      toast.description,
-      toast.descriptionHtml,
-      descriptionId,
-      tv,
-      slotProps.descriptionClassName,
-      slotProps.descriptionStyle
-    ]);
+    }, [toast.description, descriptionId, tv, slotProps.descriptionClassName, slotProps.descriptionStyle]);
     const actionsContent = useMemo(() => {
       var _a;
       if (!toast.action && !toast.cancel) return null;

package/dist/components/toast/src/store.d.ts

@@ -3,12 +3,20 @@ export interface ToastData {
     id: string;
     type: ToastType;
     variant?: ToastVariant;
+    /**
+     * Title content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
     title?: React.ReactNode;
-    /** HTML string for title - rendered with dangerouslySetInnerHTML */
-    titleHtml?: string;
+    /**
+     * Description content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
     description?: React.ReactNode;
-    /** HTML string for description - rendered with dangerouslySetInnerHTML */
-    descriptionHtml?: string;
     duration?: number;
     icon?: React.ReactNode;
     action?: {
@@ -30,9 +38,13 @@ export interface ToastData {
 export interface ToastOptions {
     id?: string;
     variant?: ToastVariant;
+    /**
+     * Description content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
     description?: React.ReactNode;
-    /** HTML string for description - rendered with dangerouslySetInnerHTML */
-    descriptionHtml?: string;
     duration?: number;
     icon?: React.ReactNode;
     action?: {

package/dist/components/toast/src/store.js

@@ -74,7 +74,6 @@ function addToast(title, type, options = {}, toasterId = DEFAULT_TOASTER_ID) {
     variant: options.variant,
     title,
     description: options.description,
-    descriptionHtml: options.descriptionHtml,
     duration: options.duration,
     icon: options.icon,
     action: options.action,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.6.9",
+  "version": "1.7.1",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",