@liveblocks/react-ui 2.18.3 → 2.18.4-uns1

package/dist/components/InboxNotification.js

@@ -1,34 +1,32 @@
 "use client";
-'use strict';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { assertNever, console } from '@liveblocks/core';
+import { useMarkInboxNotificationAsRead, useDeleteInboxNotification, useInboxNotificationThread, useRoomInfo } from '@liveblocks/react';
+import { Slot } from '@radix-ui/react-slot';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { forwardRef, useState, useCallback, useMemo } from 'react';
+import { useComponents } from '../components.js';
+import { CheckIcon } from '../icons/Check.js';
+import { DeleteIcon } from '../icons/Delete.js';
+import { EllipsisIcon } from '../icons/Ellipsis.js';
+import { WarningIcon } from '../icons/Warning.js';
+import { useOverrides } from '../overrides.js';
+import { Timestamp } from '../primitives/Timestamp.js';
+import { useCurrentUserId } from '../shared.js';
+import { classNames } from '../utils/class-names.js';
+import { generateURL } from '../utils/url.js';
+import { Avatar } from './internal/Avatar.js';
+import { Button } from './internal/Button.js';
+import { Dropdown, DropdownItem } from './internal/Dropdown.js';
+import { generateInboxNotificationThreadContents, InboxNotificationComment, INBOX_NOTIFICATION_THREAD_MAX_COMMENTS } from './internal/InboxNotificationThread.js';
+import { List } from './internal/List.js';
+import { Room } from './internal/Room.js';
+import { Tooltip } from './internal/Tooltip.js';
+import { User } from './internal/User.js';
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@liveblocks/core');
-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 components = require('../components.js');
-var Check = require('../icons/Check.js');
-var Delete = require('../icons/Delete.js');
-var Ellipsis = require('../icons/Ellipsis.js');
-var Warning = require('../icons/Warning.js');
-var overrides = require('../overrides.js');
-var Timestamp = require('../primitives/Timestamp.js');
-var shared = require('../shared.js');
-var classNames = require('../utils/class-names.js');
-var url = require('../utils/url.js');
-var Avatar = require('./internal/Avatar.js');
-var Button = require('./internal/Button.js');
-var Dropdown = require('./internal/Dropdown.js');
-var InboxNotificationThread$1 = require('./internal/InboxNotificationThread.js');
-var List = require('./internal/List.js');
-var Room = require('./internal/Room.js');
-var Tooltip = require('./internal/Tooltip.js');
-var User = require('./internal/User.js');
-var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 
-
-const InboxNotificationLayout = react.forwardRef(
+const InboxNotificationLayout = forwardRef(
   ({
     inboxNotification,
     children,
@@ -40,19 +38,19 @@ const InboxNotificationLayout = react.forwardRef(
     onClick,
     href,
     showActions,
-    overrides: overrides$1,
-    components: components$1,
+    overrides,
+    components,
     className,
     asChild,
     ...props
   }, forwardedRef) => {
-    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$1.useMarkInboxNotificationAsRead();
-    const deleteInboxNotification = react$1.useDeleteInboxNotification();
-    const handleClick = react.useCallback(
+    const $ = useOverrides(overrides);
+    const { Anchor } = useComponents(components);
+    const Component = asChild ? Slot : Anchor;
+    const [isMoreActionOpen, setMoreActionOpen] = useState(false);
+    const markInboxNotificationAsRead = useMarkInboxNotificationAsRead();
+    const deleteInboxNotification = useDeleteInboxNotification();
+    const handleClick = useCallback(
       (event) => {
         onClick?.(event);
         const shouldMarkAsReadOnClick = markAsReadOnClick ?? Boolean(href);
@@ -69,30 +67,30 @@ const InboxNotificationLayout = react.forwardRef(
         unread
       ]
     );
-    const stopPropagation = react.useCallback((event) => {
+    const stopPropagation = useCallback((event) => {
       event.stopPropagation();
     }, []);
-    const preventDefaultAndStopPropagation = react.useCallback(
+    const preventDefaultAndStopPropagation = useCallback(
       (event) => {
         event.preventDefault();
         event.stopPropagation();
       },
       []
     );
-    const handleMoreClick = react.useCallback((event) => {
+    const handleMoreClick = useCallback((event) => {
       event.preventDefault();
       event.stopPropagation();
       setMoreActionOpen((open) => !open);
     }, []);
-    const handleMarkAsRead = react.useCallback(() => {
+    const handleMarkAsRead = useCallback(() => {
       markInboxNotificationAsRead(inboxNotification.id);
     }, [inboxNotification.id, markInboxNotificationAsRead]);
-    const handleDelete = react.useCallback(() => {
+    const handleDelete = useCallback(() => {
       deleteInboxNotification(inboxNotification.id);
     }, [inboxNotification.id, deleteInboxNotification]);
-    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Component, {
-        className: classNames.classNames(
+    return /* @__PURE__ */ jsx(TooltipProvider, {
+      children: /* @__PURE__ */ jsxs(Component, {
+        className: classNames(
           "lb-root lb-inbox-notification",
           showActions === "hover" && "lb-inbox-notification:show-actions-hover",
           isMoreActionOpen && "lb-inbox-notification:action-open",
@@ -106,70 +104,70 @@ const InboxNotificationLayout = react.forwardRef(
         ...props,
         ref: forwardedRef,
         children: [
-          aside && /* @__PURE__ */ jsxRuntime.jsx("div", {
+          aside && /* @__PURE__ */ jsx("div", {
             className: "lb-inbox-notification-aside",
             children: aside
           }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          /* @__PURE__ */ jsxs("div", {
             className: "lb-inbox-notification-content",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              /* @__PURE__ */ jsxs("div", {
                 className: "lb-inbox-notification-header",
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                  /* @__PURE__ */ jsx("span", {
                     className: "lb-inbox-notification-title",
                     children: title
                   }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  /* @__PURE__ */ jsx("div", {
                     className: "lb-inbox-notification-details",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                    children: /* @__PURE__ */ jsxs("span", {
                       className: "lb-inbox-notification-details-labels",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(Timestamp.Timestamp, {
+                        /* @__PURE__ */ jsx(Timestamp, {
                           locale: $.locale,
                           date,
                           className: "lb-date lb-inbox-notification-date"
                         }),
-                        unread && /* @__PURE__ */ jsxRuntime.jsx("span", {
+                        unread && /* @__PURE__ */ jsx("span", {
                           className: "lb-inbox-notification-unread-indicator",
                           role: "presentation"
                         })
                       ]
                     })
                   }),
-                  showActions && /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  showActions && /* @__PURE__ */ jsx("div", {
                     className: "lb-inbox-notification-actions",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown, {
+                    children: /* @__PURE__ */ jsx(Dropdown, {
                       open: isMoreActionOpen,
                       onOpenChange: setMoreActionOpen,
                       align: "end",
-                      content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                      content: /* @__PURE__ */ jsxs(Fragment, {
                         children: [
-                          unread ? /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownItem, {
+                          unread ? /* @__PURE__ */ jsx(DropdownItem, {
                             onSelect: handleMarkAsRead,
                             onClick: stopPropagation,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {}),
+                            icon: /* @__PURE__ */ jsx(CheckIcon, {}),
                             children: $.INBOX_NOTIFICATION_MARK_AS_READ
                           }) : null,
-                          /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownItem, {
+                          /* @__PURE__ */ jsx(DropdownItem, {
                             onSelect: handleDelete,
                             onClick: stopPropagation,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {}),
+                            icon: /* @__PURE__ */ jsx(DeleteIcon, {}),
                             children: $.INBOX_NOTIFICATION_DELETE
                           })
                         ]
                       }),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                      children: /* @__PURE__ */ jsx(Tooltip, {
                         content: $.INBOX_NOTIFICATION_MORE,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.DropdownMenuTrigger, {
+                        children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
                           asChild: true,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                          children: /* @__PURE__ */ jsx(Button, {
                             className: "lb-inbox-notification-action",
                             onClick: handleMoreClick,
                             onPointerDown: preventDefaultAndStopPropagation,
                             onPointerUp: preventDefaultAndStopPropagation,
                             "aria-label": $.INBOX_NOTIFICATION_MORE,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {})
+                            icon: /* @__PURE__ */ jsx(EllipsisIcon, {})
                           })
                         })
                       })
@@ -177,7 +175,7 @@ const InboxNotificationLayout = react.forwardRef(
                   })
                 ]
               }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", {
+              /* @__PURE__ */ jsx("div", {
                 className: "lb-inbox-notification-body",
                 children
               })
@@ -192,8 +190,8 @@ function InboxNotificationIcon({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-inbox-notification-icon", className),
+  return /* @__PURE__ */ jsx("div", {
+    className: classNames("lb-inbox-notification-icon", className),
     ...props
   });
 }
@@ -201,12 +199,12 @@ function InboxNotificationAvatar({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
-    className: classNames.classNames("lb-inbox-notification-avatar", className),
+  return /* @__PURE__ */ jsx(Avatar, {
+    className: classNames("lb-inbox-notification-avatar", className),
     ...props
   });
 }
-const InboxNotificationThread = react.forwardRef(
+const InboxNotificationThread = forwardRef(
   ({
     inboxNotification,
     href,
@@ -214,15 +212,15 @@ const InboxNotificationThread = react.forwardRef(
     showReactions = true,
     showAttachments = true,
     showActions = "hover",
-    overrides: overrides$1,
+    overrides,
     ...props
   }, forwardedRef) => {
-    const $ = overrides.useOverrides(overrides$1);
-    const thread = react$1.useInboxNotificationThread(inboxNotification.id);
-    const currentUserId = shared.useCurrentUserId();
-    const { info } = react$1.useRoomInfo(inboxNotification.roomId);
-    const contents = react.useMemo(() => {
-      const contents2 = InboxNotificationThread$1.generateInboxNotificationThreadContents(
+    const $ = useOverrides(overrides);
+    const thread = useInboxNotificationThread(inboxNotification.id);
+    const currentUserId = useCurrentUserId();
+    const { info } = useRoomInfo(inboxNotification.roomId);
+    const contents = useMemo(() => {
+      const contents2 = generateInboxNotificationThreadContents(
         inboxNotification,
         thread,
         currentUserId ?? ""
@@ -234,32 +232,32 @@ const InboxNotificationThread = react.forwardRef(
         case "comments": {
           const reversedUserIds = [...contents2.userIds].reverse();
           const firstUserId = reversedUserIds[0];
-          const aside2 = /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationAvatar, {
+          const aside2 = /* @__PURE__ */ jsx(InboxNotificationAvatar, {
             userId: firstUserId
           });
           const title2 = $.INBOX_NOTIFICATION_THREAD_COMMENTS_LIST(
-            /* @__PURE__ */ jsxRuntime.jsx(List.List, {
-              values: reversedUserIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+            /* @__PURE__ */ jsx(List, {
+              values: reversedUserIds.map((userId) => /* @__PURE__ */ jsx(User, {
                 userId,
                 replaceSelf: true
               }, userId)),
               formatRemaining: $.LIST_REMAINING_USERS,
-              truncate: InboxNotificationThread$1.INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1,
+              truncate: INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1,
               locale: $.locale
             }),
-            showRoomName ? /* @__PURE__ */ jsxRuntime.jsx(Room.Room, {
+            showRoomName ? /* @__PURE__ */ jsx(Room, {
               roomId: thread.roomId
             }) : void 0,
             reversedUserIds.length
           );
-          const content2 = /* @__PURE__ */ jsxRuntime.jsx("div", {
+          const content2 = /* @__PURE__ */ jsx("div", {
             className: "lb-inbox-notification-comments",
-            children: contents2.comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationThread$1.InboxNotificationComment, {
+            children: contents2.comments.map((comment) => /* @__PURE__ */ jsx(InboxNotificationComment, {
               comment,
               showHeader: contents2.comments.length > 1,
               showAttachments,
               showReactions,
-              overrides: overrides$1
+              overrides
             }, comment.id))
           });
           return {
@@ -275,25 +273,25 @@ const InboxNotificationThread = react.forwardRef(
         case "mention": {
           const mentionUserId = contents2.userIds[0];
           const mentionComment = contents2.comments[0];
-          const aside2 = /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationAvatar, {
+          const aside2 = /* @__PURE__ */ jsx(InboxNotificationAvatar, {
             userId: mentionUserId
           });
           const title2 = $.INBOX_NOTIFICATION_THREAD_MENTION(
-            /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+            /* @__PURE__ */ jsx(User, {
               userId: mentionUserId
             }, mentionUserId),
-            showRoomName ? /* @__PURE__ */ jsxRuntime.jsx(Room.Room, {
+            showRoomName ? /* @__PURE__ */ jsx(Room, {
               roomId: thread.roomId
             }) : void 0
           );
-          const content2 = /* @__PURE__ */ jsxRuntime.jsx("div", {
+          const content2 = /* @__PURE__ */ jsx("div", {
             className: "lb-inbox-notification-comments",
-            children: /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationThread$1.InboxNotificationComment, {
+            children: /* @__PURE__ */ jsx(InboxNotificationComment, {
               comment: mentionComment,
               showHeader: false,
               showAttachments,
               showReactions,
-              overrides: overrides$1
+              overrides
             }, mentionComment.id)
           });
           return {
@@ -307,7 +305,7 @@ const InboxNotificationThread = react.forwardRef(
           };
         }
         default:
-          return core.assertNever(
+          return assertNever(
             contents2,
             "Unexpected thread inbox notification type"
           );
@@ -316,27 +314,27 @@ const InboxNotificationThread = react.forwardRef(
       $,
       currentUserId,
       inboxNotification,
-      overrides$1,
+      overrides,
       showRoomName,
       showAttachments,
       showReactions,
       thread
     ]);
-    const resolvedHref = react.useMemo(() => {
+    const resolvedHref = useMemo(() => {
       const resolvedHref2 = href ?? info?.url;
-      return resolvedHref2 ? url.generateURL(resolvedHref2, void 0, contents?.commentId) : void 0;
+      return resolvedHref2 ? generateURL(resolvedHref2, void 0, contents?.commentId) : void 0;
     }, [contents?.commentId, href, info?.url]);
     if (!contents) {
       return null;
     }
     const { aside, title, content, date, unread } = contents;
-    return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationLayout, {
+    return /* @__PURE__ */ jsx(InboxNotificationLayout, {
       inboxNotification,
       aside,
       title,
       date,
       unread,
-      overrides: overrides$1,
+      overrides,
       href: resolvedHref,
       showActions,
       markAsReadOnClick: false,
@@ -346,41 +344,41 @@ const InboxNotificationThread = react.forwardRef(
     });
   }
 );
-const InboxNotificationTextMention = react.forwardRef(
+const InboxNotificationTextMention = forwardRef(
   ({
     inboxNotification,
     showActions = "hover",
     showRoomName = true,
-    overrides: overrides$1,
+    overrides,
     ...props
   }, ref) => {
-    const $ = overrides.useOverrides(overrides$1);
-    const unread = react.useMemo(() => {
+    const $ = useOverrides(overrides);
+    const unread = useMemo(() => {
       return !inboxNotification.readAt || inboxNotification.notifiedAt > inboxNotification.readAt;
     }, [inboxNotification.notifiedAt, inboxNotification.readAt]);
-    return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationLayout, {
+    return /* @__PURE__ */ jsx(InboxNotificationLayout, {
       inboxNotification,
-      aside: /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationAvatar, {
+      aside: /* @__PURE__ */ jsx(InboxNotificationAvatar, {
         userId: inboxNotification.createdBy
       }),
       title: $.INBOX_NOTIFICATION_TEXT_MENTION(
-        /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+        /* @__PURE__ */ jsx(User, {
           userId: inboxNotification.createdBy
         }, inboxNotification.createdBy),
-        showRoomName ? /* @__PURE__ */ jsxRuntime.jsx(Room.Room, {
+        showRoomName ? /* @__PURE__ */ jsx(Room, {
           roomId: inboxNotification.roomId
         }) : void 0
       ),
       date: inboxNotification.notifiedAt,
       unread,
-      overrides: overrides$1,
+      overrides,
       showActions,
       ...props,
       ref
     });
   }
 );
-const InboxNotificationCustom = react.forwardRef(
+const InboxNotificationCustom = forwardRef(
   ({
     inboxNotification,
     showActions = "hover",
@@ -390,10 +388,10 @@ const InboxNotificationCustom = react.forwardRef(
     overrides,
     ...props
   }, forwardedRef) => {
-    const unread = react.useMemo(() => {
+    const unread = useMemo(() => {
       return !inboxNotification.readAt || inboxNotification.notifiedAt > inboxNotification.readAt;
     }, [inboxNotification.notifiedAt, inboxNotification.readAt]);
-    return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationLayout, {
+    return /* @__PURE__ */ jsx(InboxNotificationLayout, {
       inboxNotification,
       aside,
       title,
@@ -407,28 +405,28 @@ const InboxNotificationCustom = react.forwardRef(
     });
   }
 );
-const InboxNotificationCustomMissing = react.forwardRef(({ inboxNotification, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(InboxNotificationCustom, {
+const InboxNotificationCustomMissing = forwardRef(({ inboxNotification, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxs(InboxNotificationCustom, {
     inboxNotification,
     ...props,
-    title: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    title: /* @__PURE__ */ jsxs(Fragment, {
       children: [
         "Custom notification kind ",
-        /* @__PURE__ */ jsxRuntime.jsx("code", {
+        /* @__PURE__ */ jsx("code", {
           children: inboxNotification.kind
         }),
         " is not handled"
       ]
     }),
-    aside: /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationIcon, {
-      children: /* @__PURE__ */ jsxRuntime.jsx(Warning.WarningIcon, {})
+    aside: /* @__PURE__ */ jsx(InboxNotificationIcon, {
+      children: /* @__PURE__ */ jsx(WarningIcon, {})
     }),
     ref: forwardedRef,
     "data-missing": "",
     children: [
       "Notifications of this kind won\u2019t be displayed in production. Use the",
       " ",
-      /* @__PURE__ */ jsxRuntime.jsx("code", {
+      /* @__PURE__ */ jsx("code", {
         children: "kinds"
       }),
       " prop to define how they should be rendered."
@@ -437,12 +435,12 @@ const InboxNotificationCustomMissing = react.forwardRef(({ inboxNotification, ..
 });
 const inboxNotificationKindsWarnings = /* @__PURE__ */ new Set();
 const InboxNotification = Object.assign(
-  react.forwardRef(
+  forwardRef(
     ({ inboxNotification, kinds, ...props }, forwardedRef) => {
       switch (inboxNotification.kind) {
         case "thread": {
           const ResolvedInboxNotificationThread = kinds?.thread ?? InboxNotificationThread;
-          return /* @__PURE__ */ jsxRuntime.jsx(ResolvedInboxNotificationThread, {
+          return /* @__PURE__ */ jsx(ResolvedInboxNotificationThread, {
             inboxNotification,
             ...props,
             ref: forwardedRef
@@ -450,7 +448,7 @@ const InboxNotification = Object.assign(
         }
         case "textMention": {
           const ResolvedInboxNotificationTextMention = kinds?.textMention ?? InboxNotificationTextMention;
-          return /* @__PURE__ */ jsxRuntime.jsx(ResolvedInboxNotificationTextMention, {
+          return /* @__PURE__ */ jsx(ResolvedInboxNotificationTextMention, {
             inboxNotification,
             ...props,
             ref: forwardedRef
@@ -462,11 +460,11 @@ const InboxNotification = Object.assign(
             if (process.env.NODE_ENV !== "production") {
               if (!inboxNotificationKindsWarnings.has(inboxNotification.kind)) {
                 inboxNotificationKindsWarnings.add(inboxNotification.kind);
-                core.console.warn(
+                console.warn(
                   `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__ */ jsxRuntime.jsx(InboxNotificationCustomMissing, {
+              return /* @__PURE__ */ jsx(InboxNotificationCustomMissing, {
                 inboxNotification,
                 ...props,
                 ref: forwardedRef
@@ -475,7 +473,7 @@ const InboxNotification = Object.assign(
               return null;
             }
           }
-          return /* @__PURE__ */ jsxRuntime.jsx(ResolvedInboxNotificationCustom, {
+          return /* @__PURE__ */ jsx(ResolvedInboxNotificationCustom, {
             inboxNotification,
             ...props,
             ref: forwardedRef
@@ -493,5 +491,5 @@ const InboxNotification = Object.assign(
   }
 );
 
-exports.InboxNotification = InboxNotification;
+export { InboxNotification };
 //# sourceMappingURL=InboxNotification.js.map