@liveblocks/react-ui 2.14.0 → 2.15.0

package/dist/components/InboxNotification.js

@@ -1,11 +1,11 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
-var react = require('@liveblocks/react');
+var react$1 = require('@liveblocks/react');
 var reactSlot = require('@radix-ui/react-slot');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var React = require('react');
+var react = require('react');
 var components = require('../components.js');
 var Check = require('../icons/Check.js');
 var Delete = require('../icons/Delete.js');
@@ -26,7 +26,8 @@ var Tooltip = require('./internal/Tooltip.js');
 var User = require('./internal/User.js');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 
-const InboxNotificationLayout = React.forwardRef(
+"use client";
+const InboxNotificationLayout = react.forwardRef(
   ({
     inboxNotification,
     children,
@@ -47,10 +48,10 @@ const InboxNotificationLayout = React.forwardRef(
     const $ = overrides.useOverrides(overrides$1);
     const { Anchor } = components.useComponents(components$1);
     const Component = asChild ? reactSlot.Slot : Anchor;
-    const [isMoreActionOpen, setMoreActionOpen] = React.useState(false);
-    const markInboxNotificationAsRead = react.useMarkInboxNotificationAsRead();
-    const deleteInboxNotification = react.useDeleteInboxNotification();
-    const handleClick = React.useCallback(
+    const [isMoreActionOpen, setMoreActionOpen] = react.useState(false);
+    const markInboxNotificationAsRead = react$1.useMarkInboxNotificationAsRead();
+    const deleteInboxNotification = react$1.useDeleteInboxNotification();
+    const handleClick = react.useCallback(
       (event) => {
         onClick?.(event);
         const shouldMarkAsReadOnClick = markAsReadOnClick ?? Boolean(href);
@@ -67,99 +68,140 @@ const InboxNotificationLayout = React.forwardRef(
         unread
       ]
     );
-    const stopPropagation = React.useCallback((event) => {
+    const stopPropagation = react.useCallback((event) => {
       event.stopPropagation();
     }, []);
-    const preventDefaultAndStopPropagation = React.useCallback(
+    const preventDefaultAndStopPropagation = react.useCallback(
       (event) => {
         event.preventDefault();
         event.stopPropagation();
       },
       []
     );
-    const handleMoreClick = React.useCallback((event) => {
+    const handleMoreClick = react.useCallback((event) => {
       event.preventDefault();
       event.stopPropagation();
       setMoreActionOpen((open) => !open);
     }, []);
-    const handleMarkAsRead = React.useCallback(() => {
+    const handleMarkAsRead = react.useCallback(() => {
       markInboxNotificationAsRead(inboxNotification.id);
     }, [inboxNotification.id, markInboxNotificationAsRead]);
-    const handleDelete = React.useCallback(() => {
+    const handleDelete = react.useCallback(() => {
       deleteInboxNotification(inboxNotification.id);
     }, [inboxNotification.id, deleteInboxNotification]);
-    return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, /* @__PURE__ */ React.createElement(Component, {
-      className: classNames.classNames(
-        "lb-root lb-inbox-notification",
-        showActions === "hover" && "lb-inbox-notification:show-actions-hover",
-        isMoreActionOpen && "lb-inbox-notification:action-open",
-        className
-      ),
-      dir: $.dir,
-      "data-unread": unread ? "" : void 0,
-      "data-kind": inboxNotification.kind,
-      onClick: handleClick,
-      href,
-      ...props,
-      ref: forwardedRef
-    }, aside && /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-aside"
-    }, aside), /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-content"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-header"
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: "lb-inbox-notification-title"
-    }, title), /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-details"
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: "lb-inbox-notification-details-labels"
-    }, /* @__PURE__ */ React.createElement(Timestamp.Timestamp, {
-      locale: $.locale,
-      date,
-      className: "lb-date lb-inbox-notification-date"
-    }), unread && /* @__PURE__ */ React.createElement("span", {
-      className: "lb-inbox-notification-unread-indicator",
-      role: "presentation"
-    }))), showActions && /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-actions"
-    }, /* @__PURE__ */ React.createElement(Dropdown.Dropdown, {
-      open: isMoreActionOpen,
-      onOpenChange: setMoreActionOpen,
-      align: "end",
-      content: /* @__PURE__ */ React.createElement(React.Fragment, null, unread ? /* @__PURE__ */ React.createElement(Dropdown.DropdownItem, {
-        onSelect: handleMarkAsRead,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React.createElement(Check.CheckIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.INBOX_NOTIFICATION_MARK_AS_READ) : null, /* @__PURE__ */ React.createElement(Dropdown.DropdownItem, {
-        onSelect: handleDelete,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React.createElement(Delete.DeleteIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.INBOX_NOTIFICATION_DELETE))
-    }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-      content: $.INBOX_NOTIFICATION_MORE
-    }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.DropdownMenuTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button.Button, {
-      className: "lb-inbox-notification-action",
-      onClick: handleMoreClick,
-      onPointerDown: preventDefaultAndStopPropagation,
-      onPointerUp: preventDefaultAndStopPropagation,
-      "aria-label": $.INBOX_NOTIFICATION_MORE
-    }, /* @__PURE__ */ React.createElement(Ellipsis.EllipsisIcon, {
-      className: "lb-button-icon"
-    }))))))), /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-body"
-    }, children))));
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Component, {
+        className: classNames.classNames(
+          "lb-root lb-inbox-notification",
+          showActions === "hover" && "lb-inbox-notification:show-actions-hover",
+          isMoreActionOpen && "lb-inbox-notification:action-open",
+          className
+        ),
+        dir: $.dir,
+        "data-unread": unread ? "" : void 0,
+        "data-kind": inboxNotification.kind,
+        onClick: handleClick,
+        href,
+        ...props,
+        ref: forwardedRef,
+        children: [
+          aside && /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-inbox-notification-aside",
+            children: aside
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            className: "lb-inbox-notification-content",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                className: "lb-inbox-notification-header",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    className: "lb-inbox-notification-title",
+                    children: title
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    className: "lb-inbox-notification-details",
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                      className: "lb-inbox-notification-details-labels",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Timestamp.Timestamp, {
+                          locale: $.locale,
+                          date,
+                          className: "lb-date lb-inbox-notification-date"
+                        }),
+                        unread && /* @__PURE__ */ jsxRuntime.jsx("span", {
+                          className: "lb-inbox-notification-unread-indicator",
+                          role: "presentation"
+                        })
+                      ]
+                    })
+                  }),
+                  showActions && /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    className: "lb-inbox-notification-actions",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown, {
+                      open: isMoreActionOpen,
+                      onOpenChange: setMoreActionOpen,
+                      align: "end",
+                      content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                          unread ? /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                            onSelect: handleMarkAsRead,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.INBOX_NOTIFICATION_MARK_AS_READ
+                            ]
+                          }) : null,
+                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                            onSelect: handleDelete,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.INBOX_NOTIFICATION_DELETE
+                            ]
+                          })
+                        ]
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                        content: $.INBOX_NOTIFICATION_MORE,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.DropdownMenuTrigger, {
+                          asChild: true,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                            className: "lb-inbox-notification-action",
+                            onClick: handleMoreClick,
+                            onPointerDown: preventDefaultAndStopPropagation,
+                            onPointerUp: preventDefaultAndStopPropagation,
+                            "aria-label": $.INBOX_NOTIFICATION_MORE,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {
+                              className: "lb-button-icon"
+                            })
+                          })
+                        })
+                      })
+                    })
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-inbox-notification-body",
+                children
+              })
+            ]
+          })
+        ]
+      })
+    });
   }
 );
 function InboxNotificationIcon({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-inbox-notification-icon", className),
     ...props
   });
@@ -168,12 +210,12 @@ function InboxNotificationAvatar({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement(Avatar.Avatar, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
     className: classNames.classNames("lb-inbox-notification-avatar", className),
     ...props
   });
 }
-const InboxNotificationThread = React.forwardRef(
+const InboxNotificationThread = react.forwardRef(
   ({
     inboxNotification,
     href,
@@ -185,10 +227,10 @@ const InboxNotificationThread = React.forwardRef(
     ...props
   }, forwardedRef) => {
     const $ = overrides.useOverrides(overrides$1);
-    const thread = react.useInboxNotificationThread(inboxNotification.id);
+    const thread = react$1.useInboxNotificationThread(inboxNotification.id);
     const currentUserId = shared.useCurrentUserId();
-    const { info } = react.useRoomInfo(inboxNotification.roomId);
-    const contents = React.useMemo(() => {
+    const { info } = react$1.useRoomInfo(inboxNotification.roomId);
+    const contents = react.useMemo(() => {
       const contents2 = InboxNotificationThread$1.generateInboxNotificationThreadContents(
         inboxNotification,
         thread,
@@ -201,35 +243,34 @@ const InboxNotificationThread = React.forwardRef(
         case "comments": {
           const reversedUserIds = [...contents2.userIds].reverse();
           const firstUserId = reversedUserIds[0];
-          const aside2 = /* @__PURE__ */ React.createElement(InboxNotificationAvatar, {
+          const aside2 = /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationAvatar, {
             userId: firstUserId
           });
           const title2 = $.INBOX_NOTIFICATION_THREAD_COMMENTS_LIST(
-            /* @__PURE__ */ React.createElement(List.List, {
-              values: reversedUserIds.map((userId) => /* @__PURE__ */ React.createElement(User.User, {
-                key: userId,
+            /* @__PURE__ */ jsxRuntime.jsx(List.List, {
+              values: reversedUserIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsx(User.User, {
                 userId,
                 replaceSelf: true
-              })),
+              }, userId)),
               formatRemaining: $.LIST_REMAINING_USERS,
               truncate: InboxNotificationThread$1.INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1,
               locale: $.locale
             }),
-            showRoomName ? /* @__PURE__ */ React.createElement(Room.Room, {
+            showRoomName ? /* @__PURE__ */ jsxRuntime.jsx(Room.Room, {
               roomId: thread.roomId
             }) : void 0,
             reversedUserIds.length
           );
-          const content2 = /* @__PURE__ */ React.createElement("div", {
-            className: "lb-inbox-notification-comments"
-          }, contents2.comments.map((comment) => /* @__PURE__ */ React.createElement(InboxNotificationThread$1.InboxNotificationComment, {
-            key: comment.id,
-            comment,
-            showHeader: contents2.comments.length > 1,
-            showAttachments,
-            showReactions,
-            overrides: overrides$1
-          })));
+          const content2 = /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-inbox-notification-comments",
+            children: contents2.comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationThread$1.InboxNotificationComment, {
+              comment,
+              showHeader: contents2.comments.length > 1,
+              showAttachments,
+              showReactions,
+              overrides: overrides$1
+            }, comment.id))
+          });
           return {
             unread: contents2.unread,
             date: contents2.date,
@@ -243,28 +284,27 @@ const InboxNotificationThread = React.forwardRef(
         case "mention": {
           const mentionUserId = contents2.userIds[0];
           const mentionComment = contents2.comments[0];
-          const aside2 = /* @__PURE__ */ React.createElement(InboxNotificationAvatar, {
+          const aside2 = /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationAvatar, {
             userId: mentionUserId
           });
           const title2 = $.INBOX_NOTIFICATION_THREAD_MENTION(
-            /* @__PURE__ */ React.createElement(User.User, {
-              key: mentionUserId,
+            /* @__PURE__ */ jsxRuntime.jsx(User.User, {
               userId: mentionUserId
-            }),
-            showRoomName ? /* @__PURE__ */ React.createElement(Room.Room, {
+            }, mentionUserId),
+            showRoomName ? /* @__PURE__ */ jsxRuntime.jsx(Room.Room, {
               roomId: thread.roomId
             }) : void 0
           );
-          const content2 = /* @__PURE__ */ React.createElement("div", {
-            className: "lb-inbox-notification-comments"
-          }, /* @__PURE__ */ React.createElement(InboxNotificationThread$1.InboxNotificationComment, {
-            key: mentionComment.id,
-            comment: mentionComment,
-            showHeader: false,
-            showAttachments,
-            showReactions,
-            overrides: overrides$1
-          }));
+          const content2 = /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-inbox-notification-comments",
+            children: /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationThread$1.InboxNotificationComment, {
+              comment: mentionComment,
+              showHeader: false,
+              showAttachments,
+              showReactions,
+              overrides: overrides$1
+            }, mentionComment.id)
+          });
           return {
             unread: contents2.unread,
             date: contents2.date,
@@ -291,7 +331,7 @@ const InboxNotificationThread = React.forwardRef(
       showReactions,
       thread
     ]);
-    const resolvedHref = React.useMemo(() => {
+    const resolvedHref = react.useMemo(() => {
       const resolvedHref2 = href ?? info?.url;
       return resolvedHref2 ? url.generateURL(resolvedHref2, void 0, contents?.commentId) : void 0;
     }, [contents?.commentId, href, info?.url]);
@@ -299,7 +339,7 @@ const InboxNotificationThread = React.forwardRef(
       return null;
     }
     const { aside, title, content, date, unread } = contents;
-    return /* @__PURE__ */ React.createElement(InboxNotificationLayout, {
+    return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationLayout, {
       inboxNotification,
       aside,
       title,
@@ -310,11 +350,12 @@ const InboxNotificationThread = React.forwardRef(
       showActions,
       markAsReadOnClick: false,
       ...props,
-      ref: forwardedRef
-    }, content);
+      ref: forwardedRef,
+      children: content
+    });
   }
 );
-const InboxNotificationTextMention = React.forwardRef(
+const InboxNotificationTextMention = react.forwardRef(
   ({
     inboxNotification,
     showActions = "hover",
@@ -323,20 +364,19 @@ const InboxNotificationTextMention = React.forwardRef(
     ...props
   }, ref) => {
     const $ = overrides.useOverrides(overrides$1);
-    const unread = React.useMemo(() => {
+    const unread = react.useMemo(() => {
       return !inboxNotification.readAt || inboxNotification.notifiedAt > inboxNotification.readAt;
     }, [inboxNotification.notifiedAt, inboxNotification.readAt]);
-    return /* @__PURE__ */ React.createElement(InboxNotificationLayout, {
+    return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationLayout, {
       inboxNotification,
-      aside: /* @__PURE__ */ React.createElement(InboxNotificationAvatar, {
+      aside: /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationAvatar, {
         userId: inboxNotification.createdBy
       }),
       title: $.INBOX_NOTIFICATION_TEXT_MENTION(
-        /* @__PURE__ */ React.createElement(User.User, {
-          key: inboxNotification.createdBy,
+        /* @__PURE__ */ jsxRuntime.jsx(User.User, {
           userId: inboxNotification.createdBy
-        }),
-        showRoomName ? /* @__PURE__ */ React.createElement(Room.Room, {
+        }, inboxNotification.createdBy),
+        showRoomName ? /* @__PURE__ */ jsxRuntime.jsx(Room.Room, {
           roomId: inboxNotification.roomId
         }) : void 0
       ),
@@ -349,7 +389,7 @@ const InboxNotificationTextMention = React.forwardRef(
     });
   }
 );
-const InboxNotificationCustom = React.forwardRef(
+const InboxNotificationCustom = react.forwardRef(
   ({
     inboxNotification,
     showActions = "hover",
@@ -359,10 +399,10 @@ const InboxNotificationCustom = React.forwardRef(
     overrides,
     ...props
   }, forwardedRef) => {
-    const unread = React.useMemo(() => {
+    const unread = react.useMemo(() => {
       return !inboxNotification.readAt || inboxNotification.notifiedAt > inboxNotification.readAt;
     }, [inboxNotification.notifiedAt, inboxNotification.readAt]);
-    return /* @__PURE__ */ React.createElement(InboxNotificationLayout, {
+    return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationLayout, {
       inboxNotification,
       aside,
       title,
@@ -371,28 +411,47 @@ const InboxNotificationCustom = React.forwardRef(
       overrides,
       showActions,
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
-const InboxNotificationCustomMissing = React.forwardRef(({ inboxNotification, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement(InboxNotificationCustom, {
+const InboxNotificationCustomMissing = react.forwardRef(({ inboxNotification, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(InboxNotificationCustom, {
     inboxNotification,
     ...props,
-    title: /* @__PURE__ */ React.createElement(React.Fragment, null, "Custom notification kind ", /* @__PURE__ */ React.createElement("code", null, inboxNotification.kind), " is not handled"),
-    aside: /* @__PURE__ */ React.createElement(InboxNotificationIcon, null, /* @__PURE__ */ React.createElement(Warning.WarningIcon, null)),
+    title: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        "Custom notification kind ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", {
+          children: inboxNotification.kind
+        }),
+        " is not handled"
+      ]
+    }),
+    aside: /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationIcon, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(Warning.WarningIcon, {})
+    }),
     ref: forwardedRef,
-    "data-missing": ""
-  }, "Notifications of this kind won\u2019t be displayed in production. Use the", " ", /* @__PURE__ */ React.createElement("code", null, "kinds"), " prop to define how they should be rendered.");
+    "data-missing": "",
+    children: [
+      "Notifications of this kind won\u2019t be displayed in production. Use the",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", {
+        children: "kinds"
+      }),
+      " prop to define how they should be rendered."
+    ]
+  });
 });
 const inboxNotificationKindsWarnings = /* @__PURE__ */ new Set();
 const InboxNotification = Object.assign(
-  React.forwardRef(
+  react.forwardRef(
     ({ inboxNotification, kinds, ...props }, forwardedRef) => {
       switch (inboxNotification.kind) {
         case "thread": {
           const ResolvedInboxNotificationThread = kinds?.thread ?? InboxNotificationThread;
-          return /* @__PURE__ */ React.createElement(ResolvedInboxNotificationThread, {
+          return /* @__PURE__ */ jsxRuntime.jsx(ResolvedInboxNotificationThread, {
             inboxNotification,
             ...props,
             ref: forwardedRef
@@ -400,7 +459,7 @@ const InboxNotification = Object.assign(
         }
         case "textMention": {
           const ResolvedInboxNotificationTextMention = kinds?.textMention ?? InboxNotificationTextMention;
-          return /* @__PURE__ */ React.createElement(ResolvedInboxNotificationTextMention, {
+          return /* @__PURE__ */ jsxRuntime.jsx(ResolvedInboxNotificationTextMention, {
             inboxNotification,
             ...props,
             ref: forwardedRef
@@ -416,7 +475,7 @@ const InboxNotification = Object.assign(
                   `Custom notification kind "${inboxNotification.kind}" is not handled so notifications of this kind will not be displayed in production. Use the kinds prop to define how they should be rendered.`
                 );
               }
-              return /* @__PURE__ */ React.createElement(InboxNotificationCustomMissing, {
+              return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationCustomMissing, {
                 inboxNotification,
                 ...props,
                 ref: forwardedRef
@@ -425,7 +484,7 @@ const InboxNotification = Object.assign(
               return null;
             }
           }
-          return /* @__PURE__ */ React.createElement(ResolvedInboxNotificationCustom, {
+          return /* @__PURE__ */ jsxRuntime.jsx(ResolvedInboxNotificationCustom, {
             inboxNotification,
             ...props,
             ref: forwardedRef