@liveblocks/react-ui 2.21.0-emails3 → 2.21.0

package/dist/components/Thread.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.js","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentData,\n  DM,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { useThreadSubscription } from \"@liveblocks/react\";\nimport {\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { ResolveIcon } from \"../icons/Resolve\";\nimport { ResolvedIcon } from \"../icons/Resolved\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { classNames } from \"../utils/class-names\";\nimport { findLastIndex } from \"../utils/find-last-index\";\nimport type { CommentProps } from \"./Comment\";\nimport { Comment } from \"./Comment\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface ThreadProps<M extends BaseMetadata = DM>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<M>;\n\n  /**\n   * How to show or hide the composer to reply to the thread.\n   */\n  showComposer?: boolean | \"collapsed\";\n\n  /**\n   * Whether to show the action to resolve the thread.\n   */\n  showResolveAction?: boolean;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: CommentProps[\"showActions\"];\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: CommentProps[\"showReactions\"];\n\n  /**\n   * Whether to show the composer's formatting controls.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Whether to indent the comments' content.\n   */\n  indentCommentContent?: CommentProps[\"indentContent\"];\n\n  /**\n   * Whether to show deleted comments.\n   */\n  showDeletedComments?: CommentProps[\"showDeleted\"];\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * The event handler called when changing the resolved status.\n   */\n  onResolvedChange?: (resolved: boolean) => void;\n\n  /**\n   * The event handler called when a comment is edited.\n   */\n  onCommentEdit?: CommentProps[\"onCommentEdit\"];\n\n  /**\n   * The event handler called when a comment is deleted.\n   */\n  onCommentDelete?: CommentProps[\"onCommentDelete\"];\n\n  /**\n   * The event handler called when the thread is deleted.\n   * A thread is deleted when all its comments are deleted.\n   */\n  onThreadDelete?: (thread: ThreadData<M>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's author.\n   */\n  onAuthorClick?: CommentProps[\"onAuthorClick\"];\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: CommentProps[\"onMentionClick\"];\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: ComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides\n  >;\n}\n\n/**\n * Displays a thread of comments, with a composer to reply\n * to it.\n *\n * @example\n * <>\n *   {threads.map((thread) => (\n *     <Thread key={thread.id} thread={thread} />\n *   ))}\n * </>\n */\nexport const Thread = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      showAttachments = true,\n      showComposerFormattingControls = true,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      overrides,\n      className,\n      ...props\n    }: ThreadProps<M>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const firstCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? 0\n        : thread.comments.findIndex((comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const lastCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? thread.comments.length - 1\n        : findLastIndex(thread.comments, (comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const { status: subscriptionStatus, unreadSince } = useThreadSubscription(\n      thread.id\n    );\n    const unreadIndex = useMemo(() => {\n      // The user is not subscribed to this thread.\n      if (subscriptionStatus !== \"subscribed\") {\n        return;\n      }\n\n      // The user hasn't read the thread yet, so all comments are unread.\n      if (unreadSince === null) {\n        return firstCommentIndex;\n      }\n\n      // The user has read the thread, so we find the first unread comment.\n      const unreadIndex = thread.comments.findIndex(\n        (comment) =>\n          (showDeletedComments ? true : comment.body) &&\n          comment.createdAt > unreadSince\n      );\n\n      return unreadIndex >= 0 && unreadIndex < thread.comments.length\n        ? unreadIndex\n        : undefined;\n    }, [\n      firstCommentIndex,\n      showDeletedComments,\n      subscriptionStatus,\n      thread.comments,\n      unreadSince,\n    ]);\n    const [newIndex, setNewIndex] = useState<number>();\n    const newIndicatorIndex = newIndex === undefined ? unreadIndex : newIndex;\n\n    useEffect(() => {\n      if (unreadIndex) {\n        // Keep the \"new\" indicator at the lowest unread index.\n        setNewIndex((persistedUnreadIndex) =>\n          Math.min(persistedUnreadIndex ?? Infinity, unreadIndex)\n        );\n      }\n    }, [unreadIndex]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const handleResolvedChange = useCallback(\n      (resolved: boolean) => {\n        onResolvedChange?.(resolved);\n\n        if (resolved) {\n          markThreadAsResolved(thread.id);\n        } else {\n          markThreadAsUnresolved(thread.id);\n        }\n      },\n      [\n        markThreadAsResolved,\n        markThreadAsUnresolved,\n        onResolvedChange,\n        thread.id,\n      ]\n    );\n\n    const handleCommentDelete = useCallback(\n      (comment: CommentData) => {\n        onCommentDelete?.(comment);\n\n        const filteredComments = thread.comments.filter(\n          (comment) => comment.body\n        );\n\n        if (filteredComments.length <= 1) {\n          onThreadDelete?.(thread);\n        }\n      },\n      [onCommentDelete, onThreadDelete, thread]\n    );\n\n    return (\n      <TooltipProvider>\n        <div\n          className={classNames(\n            \"lb-root lb-thread\",\n            showActions === \"hover\" && \"lb-thread:show-actions-hover\",\n            className\n          )}\n          data-resolved={thread.resolved ? \"\" : undefined}\n          data-unread={unreadIndex !== undefined ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n        >\n          <div className=\"lb-thread-comments\">\n            {thread.comments.map((comment, index) => {\n              const isFirstComment = index === firstCommentIndex;\n              const isUnread =\n                unreadIndex !== undefined && index >= unreadIndex;\n\n              const children = (\n                <Comment\n                  key={comment.id}\n                  overrides={overrides}\n                  className=\"lb-thread-comment\"\n                  data-unread={isUnread ? \"\" : undefined}\n                  comment={comment}\n                  indentContent={indentCommentContent}\n                  showDeleted={showDeletedComments}\n                  showActions={showActions}\n                  showReactions={showReactions}\n                  showAttachments={showAttachments}\n                  showComposerFormattingControls={\n                    showComposerFormattingControls\n                  }\n                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  onAttachmentClick={onAttachmentClick}\n                  autoMarkReadThreadId={\n                    index === lastCommentIndex && isUnread\n                      ? thread.id\n                      : undefined\n                  }\n                  additionalActionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  additionalActions={\n                    isFirstComment && showResolveAction ? (\n                      <Tooltip\n                        content={\n                          thread.resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={thread.resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              thread.resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                            icon={\n                              thread.resolved ? (\n                                <ResolvedIcon />\n                              ) : (\n                                <ResolveIcon />\n                              )\n                            }\n                          />\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                />\n              );\n\n              return index === newIndicatorIndex &&\n                newIndicatorIndex !== firstCommentIndex &&\n                newIndicatorIndex <= lastCommentIndex ? (\n                <Fragment key={comment.id}>\n                  <div\n                    className=\"lb-thread-new-indicator\"\n                    aria-label={$.THREAD_NEW_INDICATOR_DESCRIPTION}\n                  >\n                    <span className=\"lb-thread-new-indicator-label\">\n                      <ArrowDownIcon className=\"lb-thread-new-indicator-label-icon\" />\n                      {$.THREAD_NEW_INDICATOR}\n                    </span>\n                  </div>\n                  {children}\n                </Fragment>\n              ) : (\n                children\n              );\n            })}\n          </div>\n          {showComposer && (\n            <Composer\n              className=\"lb-thread-composer\"\n              threadId={thread.id}\n              defaultCollapsed={showComposer === \"collapsed\" ? true : undefined}\n              showAttachments={showAttachments}\n              showFormattingControls={showComposerFormattingControls}\n              onComposerSubmit={onComposerSubmit}\n              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n                ...overrides,\n              }}\n              roomId={thread.roomId}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ThreadProps<M> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AA2JO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAE4D;AAE9D;AAAoD;AAC3C;AAET;AAEE;AACE;AAAA;AAIF;AACE;AAAO;AAIT;AAAoC;AAGZ;AAGxB;AAEI;AACH;AACD;AACA;AACA;AACO;AACP;AAEF;AACA;AAEA;AACE;AAEE;AAAA;AACwD;AACxD;AACF;AAGF;AACE;AAAsB;AAGxB;AAA6B;AAEzB;AAEA;AACE;AAA8B;AAE9B;AAAgC;AAClC;AACF;AACA;AACE;AACA;AACA;AACO;AACT;AAGF;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AACG;AACE;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEL;AAAC;AAAc;AAEX;AACA;AAGA;AACG;AAEC;AACU;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AAGA;AACiB;AACjB;AACA;AACA;AAIM;AAGmC;AAIpC;AAIS;AAGP;AACiB;AACC;AACV;AAEN;AACW;AACD;AAID;AAMS;AAGnB;AACF;AAEA;AAKV;AAGG;AACC;AAAC;AACW;AACI;AAEb;AAAe;AACd;AAAC;AAAwB;AAAqC;AAC3D;AAAA;AACL;AACF;AACC;AAAA;AAGH;AAEH;AACH;AAEG;AACW;AACO;AACuC;AACxD;AACwB;AACxB;AACW;AACe;AACP;AACd;AACL;AACe;AACjB;AAAA;AAEJ;AACF;AAGN;;"}
+{"version":3,"file":"Thread.js","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentData,\n  DM,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { useThreadSubscription } from \"@liveblocks/react\";\nimport {\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { ResolveIcon } from \"../icons/Resolve\";\nimport { ResolvedIcon } from \"../icons/Resolved\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { classNames } from \"../utils/class-names\";\nimport { findLastIndex } from \"../utils/find-last-index\";\nimport type { CommentProps } from \"./Comment\";\nimport { Comment } from \"./Comment\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface ThreadProps<M extends BaseMetadata = DM>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<M>;\n\n  /**\n   * How to show or hide the composer to reply to the thread.\n   */\n  showComposer?: boolean | \"collapsed\";\n\n  /**\n   * Whether to show the action to resolve the thread.\n   */\n  showResolveAction?: boolean;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: CommentProps[\"showActions\"];\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: CommentProps[\"showReactions\"];\n\n  /**\n   * Whether to show the composer's formatting controls.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Whether to indent the comments' content.\n   */\n  indentCommentContent?: CommentProps[\"indentContent\"];\n\n  /**\n   * Whether to show deleted comments.\n   */\n  showDeletedComments?: CommentProps[\"showDeleted\"];\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * The event handler called when changing the resolved status.\n   */\n  onResolvedChange?: (resolved: boolean) => void;\n\n  /**\n   * The event handler called when a comment is edited.\n   */\n  onCommentEdit?: CommentProps[\"onCommentEdit\"];\n\n  /**\n   * The event handler called when a comment is deleted.\n   */\n  onCommentDelete?: CommentProps[\"onCommentDelete\"];\n\n  /**\n   * The event handler called when the thread is deleted.\n   * A thread is deleted when all its comments are deleted.\n   */\n  onThreadDelete?: (thread: ThreadData<M>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's author.\n   */\n  onAuthorClick?: CommentProps[\"onAuthorClick\"];\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: CommentProps[\"onMentionClick\"];\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: ComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides\n  >;\n}\n\n/**\n * Displays a thread of comments, with a composer to reply\n * to it.\n *\n * @example\n * <>\n *   {threads.map((thread) => (\n *     <Thread key={thread.id} thread={thread} />\n *   ))}\n * </>\n */\nexport const Thread = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      showAttachments = true,\n      showComposerFormattingControls = true,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      overrides,\n      className,\n      ...props\n    }: ThreadProps<M>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const firstCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? 0\n        : thread.comments.findIndex((comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const lastCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? thread.comments.length - 1\n        : findLastIndex(thread.comments, (comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const { status: subscriptionStatus, unreadSince } = useThreadSubscription(\n      thread.id\n    );\n    const unreadIndex = useMemo(() => {\n      // The user is not subscribed to this thread.\n      if (subscriptionStatus !== \"subscribed\") {\n        return;\n      }\n\n      // The user hasn't read the thread yet, so all comments are unread.\n      if (unreadSince === null) {\n        return firstCommentIndex;\n      }\n\n      // The user has read the thread, so we find the first unread comment.\n      const unreadIndex = thread.comments.findIndex(\n        (comment) =>\n          (showDeletedComments ? true : comment.body) &&\n          comment.createdAt > unreadSince\n      );\n\n      return unreadIndex >= 0 && unreadIndex < thread.comments.length\n        ? unreadIndex\n        : undefined;\n    }, [\n      firstCommentIndex,\n      showDeletedComments,\n      subscriptionStatus,\n      thread.comments,\n      unreadSince,\n    ]);\n    const [newIndex, setNewIndex] = useState<number>();\n    const newIndicatorIndex = newIndex === undefined ? unreadIndex : newIndex;\n\n    useEffect(() => {\n      if (unreadIndex) {\n        // Keep the \"new\" indicator at the lowest unread index.\n        setNewIndex((persistedUnreadIndex) =>\n          Math.min(persistedUnreadIndex ?? Infinity, unreadIndex)\n        );\n      }\n    }, [unreadIndex]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const handleResolvedChange = useCallback(\n      (resolved: boolean) => {\n        onResolvedChange?.(resolved);\n\n        if (resolved) {\n          markThreadAsResolved(thread.id);\n        } else {\n          markThreadAsUnresolved(thread.id);\n        }\n      },\n      [\n        markThreadAsResolved,\n        markThreadAsUnresolved,\n        onResolvedChange,\n        thread.id,\n      ]\n    );\n\n    const handleCommentDelete = useCallback(\n      (comment: CommentData) => {\n        onCommentDelete?.(comment);\n\n        const filteredComments = thread.comments.filter(\n          (comment) => comment.body\n        );\n\n        if (filteredComments.length <= 1) {\n          onThreadDelete?.(thread);\n        }\n      },\n      [onCommentDelete, onThreadDelete, thread]\n    );\n\n    return (\n      <TooltipProvider>\n        <div\n          className={classNames(\n            \"lb-root lb-thread\",\n            showActions === \"hover\" && \"lb-thread:show-actions-hover\",\n            className\n          )}\n          data-resolved={thread.resolved ? \"\" : undefined}\n          data-unread={unreadIndex !== undefined ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n        >\n          <div className=\"lb-thread-comments\">\n            {thread.comments.map((comment, index) => {\n              const isFirstComment = index === firstCommentIndex;\n              const isUnread =\n                unreadIndex !== undefined && index >= unreadIndex;\n\n              const children = (\n                <Comment\n                  key={comment.id}\n                  overrides={overrides}\n                  className=\"lb-thread-comment\"\n                  data-unread={isUnread ? \"\" : undefined}\n                  comment={comment}\n                  indentContent={indentCommentContent}\n                  showDeleted={showDeletedComments}\n                  showActions={showActions}\n                  showReactions={showReactions}\n                  showAttachments={showAttachments}\n                  showComposerFormattingControls={\n                    showComposerFormattingControls\n                  }\n                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  onAttachmentClick={onAttachmentClick}\n                  autoMarkReadThreadId={\n                    index === lastCommentIndex && isUnread\n                      ? thread.id\n                      : undefined\n                  }\n                  additionalActionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  additionalActions={\n                    isFirstComment && showResolveAction ? (\n                      <Tooltip\n                        content={\n                          thread.resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={thread.resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              thread.resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                            icon={\n                              thread.resolved ? (\n                                <ResolvedIcon />\n                              ) : (\n                                <ResolveIcon />\n                              )\n                            }\n                          />\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                />\n              );\n\n              return index === newIndicatorIndex &&\n                newIndicatorIndex !== firstCommentIndex &&\n                newIndicatorIndex <= lastCommentIndex ? (\n                <Fragment key={comment.id}>\n                  <div\n                    className=\"lb-thread-new-indicator\"\n                    aria-label={$.THREAD_NEW_INDICATOR_DESCRIPTION}\n                  >\n                    <span className=\"lb-thread-new-indicator-label\">\n                      <ArrowDownIcon className=\"lb-thread-new-indicator-label-icon\" />\n                      {$.THREAD_NEW_INDICATOR}\n                    </span>\n                  </div>\n                  {children}\n                </Fragment>\n              ) : (\n                children\n              );\n            })}\n          </div>\n          {showComposer && (\n            <Composer\n              className=\"lb-thread-composer\"\n              threadId={thread.id}\n              defaultCollapsed={showComposer === \"collapsed\" ? true : undefined}\n              showAttachments={showAttachments}\n              showFormattingControls={showComposerFormattingControls}\n              onComposerSubmit={onComposerSubmit}\n              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n                ...overrides,\n              }}\n              roomId={thread.roomId}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ThreadProps<M> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA2JO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAE4D;AAE9D;AAAoD;AAC3C;AAET;AAEE;AACE;AAAA;AAIF;AACE;AAAO;AAIT;AAAoC;AAGZ;AAGxB;AAEI;AACH;AACD;AACA;AACA;AACO;AACP;AAEF;AACA;AAEA;AACE;AAEE;AAAA;AACwD;AACxD;AACF;AAGF;AACE;AAAsB;AAGxB;AAA6B;AAEzB;AAEA;AACE;AAA8B;AAE9B;AAAgC;AAClC;AACF;AACA;AACE;AACA;AACA;AACO;AACT;AAGF;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AACG;AACE;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEL;AAAC;AAAc;AAEX;AACA;AAGA;AACG;AAEC;AACU;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AAGA;AACiB;AACjB;AACA;AACA;AAIM;AAGmC;AAIpC;AAIS;AAGP;AACiB;AACC;AACV;AAEN;AACW;AACD;AAID;AAMS;AAGnB;AACF;AAEA;AAKV;AAGG;AACC;AAAC;AACW;AACI;AAEb;AAAe;AACd;AAAC;AAAwB;AAAqC;AAC3D;AAAA;AACL;AACF;AACC;AAAA;AAGH;AAEH;AACH;AAEG;AACW;AACO;AACuC;AACxD;AACwB;AACxB;AACW;AACe;AACP;AACd;AACL;AACe;AACjB;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/internal/Attachment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.cjs","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useRoomAttachmentUrl } from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  roomId: string;\n  overrides?: Partial<Overrides>;\n  allowMediaPreview?: boolean;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img\n            src={url}\n            loading=\"lazy\"\n            onLoad={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video\n            src={url}\n            onLoadedData={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n  allowMediaPreview = true,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  allowMediaPreview?: boolean;\n  roomId: string;\n}) {\n  const [isUnsupportedPreview, setUnsupportedPreview] = useState(false);\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  function markPreviewAsUnsupported() {\n    setUnsupportedPreview(true);\n  }\n\n  if (\n    !isUnsupportedPreview &&\n    allowMediaPreview &&\n    isUploaded &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return (\n        <AttachmentImagePreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return (\n        <AttachmentVideoPreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      if (attachment.error.origin === \"server\") {\n        description = $.ATTACHMENT_TOO_LARGE();\n      } else {\n        description = $.ATTACHMENT_TOO_LARGE(\n          maxAttachmentSize\n            ? formatFileSize(maxAttachmentSize, $.locale)\n            : undefined\n        );\n      }\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAuBA;AAWA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAEA;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEN;AAAC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AAEe;AAAY;AAA4B;AAAU;AAAA;AAGvE;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACG;AACA;AACC;AACX;AAEA;AAAA;AAGV;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACS;AACL;AACX;AAEA;AAAA;AAGV;AAEA;AAA2B;AACzB;AACoB;AAEtB;AAKE;AACA;AAGA;AACE;AAA0B;AAG5B;AAME;AACE;AACG;AACC;AACA;AACA;AACF;AAIJ;AACE;AACG;AACC;AACA;AACA;AACF;AAEJ;AAGF;AAAQ;AAAwC;AAClD;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AACG;AAAe;AAAuC;AACrD;AAAC;AAAe;AAA2B;AAAa;AAErD;AAAe;AAAgC;AAAc;AAAA;AAItE;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AACE;AAAqC;AAErC;AAAgB;AAGV;AACN;AACF;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACqE;AACzC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;;;"}
+{"version":3,"file":"Attachment.cjs","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useRoomAttachmentUrl } from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  roomId: string;\n  overrides?: Partial<Overrides>;\n  allowMediaPreview?: boolean;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img\n            src={url}\n            loading=\"lazy\"\n            onLoad={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video\n            src={url}\n            onLoadedData={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n  allowMediaPreview = true,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  allowMediaPreview?: boolean;\n  roomId: string;\n}) {\n  const [isUnsupportedPreview, setUnsupportedPreview] = useState(false);\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  function markPreviewAsUnsupported() {\n    setUnsupportedPreview(true);\n  }\n\n  if (\n    !isUnsupportedPreview &&\n    allowMediaPreview &&\n    isUploaded &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return (\n        <AttachmentImagePreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return (\n        <AttachmentVideoPreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      if (attachment.error.origin === \"server\") {\n        description = $.ATTACHMENT_TOO_LARGE();\n      } else {\n        description = $.ATTACHMENT_TOO_LARGE(\n          maxAttachmentSize\n            ? formatFileSize(maxAttachmentSize, $.locale)\n            : undefined\n        );\n      }\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBA;AAWA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAEA;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEN;AAAC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AAEe;AAAY;AAA4B;AAAU;AAAA;AAGvE;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACG;AACA;AACC;AACX;AAEA;AAAA;AAGV;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACS;AACL;AACX;AAEA;AAAA;AAGV;AAEA;AAA2B;AACzB;AACoB;AAEtB;AAKE;AACA;AAGA;AACE;AAA0B;AAG5B;AAME;AACE;AACG;AACC;AACA;AACA;AACF;AAIJ;AACE;AACG;AACC;AACA;AACA;AACF;AAEJ;AAGF;AAAQ;AAAwC;AAClD;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AACG;AAAe;AAAuC;AACrD;AAAC;AAAe;AAA2B;AAAa;AAErD;AAAe;AAAgC;AAAc;AAAA;AAItE;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AACE;AAAqC;AAErC;AAAgB;AAGV;AACN;AACF;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACqE;AACzC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;;;"}

package/dist/components/internal/Attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.js","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useRoomAttachmentUrl } from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  roomId: string;\n  overrides?: Partial<Overrides>;\n  allowMediaPreview?: boolean;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img\n            src={url}\n            loading=\"lazy\"\n            onLoad={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video\n            src={url}\n            onLoadedData={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n  allowMediaPreview = true,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  allowMediaPreview?: boolean;\n  roomId: string;\n}) {\n  const [isUnsupportedPreview, setUnsupportedPreview] = useState(false);\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  function markPreviewAsUnsupported() {\n    setUnsupportedPreview(true);\n  }\n\n  if (\n    !isUnsupportedPreview &&\n    allowMediaPreview &&\n    isUploaded &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return (\n        <AttachmentImagePreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return (\n        <AttachmentVideoPreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      if (attachment.error.origin === \"server\") {\n        description = $.ATTACHMENT_TOO_LARGE();\n      } else {\n        description = $.ATTACHMENT_TOO_LARGE(\n          maxAttachmentSize\n            ? formatFileSize(maxAttachmentSize, $.locale)\n            : undefined\n        );\n      }\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;AAuBA;AAWA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAEA;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEN;AAAC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AAEe;AAAY;AAA4B;AAAU;AAAA;AAGvE;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACG;AACA;AACC;AACX;AAEA;AAAA;AAGV;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACS;AACL;AACX;AAEA;AAAA;AAGV;AAEA;AAA2B;AACzB;AACoB;AAEtB;AAKE;AACA;AAGA;AACE;AAA0B;AAG5B;AAME;AACE;AACG;AACC;AACA;AACA;AACF;AAIJ;AACE;AACG;AACC;AACA;AACA;AACF;AAEJ;AAGF;AAAQ;AAAwC;AAClD;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AACG;AAAe;AAAuC;AACrD;AAAC;AAAe;AAA2B;AAAa;AAErD;AAAe;AAAgC;AAAc;AAAA;AAItE;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AACE;AAAqC;AAErC;AAAgB;AAGV;AACN;AACF;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACqE;AACzC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;"}
+{"version":3,"file":"Attachment.js","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useRoomAttachmentUrl } from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  roomId: string;\n  overrides?: Partial<Overrides>;\n  allowMediaPreview?: boolean;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img\n            src={url}\n            loading=\"lazy\"\n            onLoad={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video\n            src={url}\n            onLoadedData={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n  allowMediaPreview = true,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  allowMediaPreview?: boolean;\n  roomId: string;\n}) {\n  const [isUnsupportedPreview, setUnsupportedPreview] = useState(false);\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  function markPreviewAsUnsupported() {\n    setUnsupportedPreview(true);\n  }\n\n  if (\n    !isUnsupportedPreview &&\n    allowMediaPreview &&\n    isUploaded &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return (\n        <AttachmentImagePreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return (\n        <AttachmentVideoPreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      if (attachment.error.origin === \"server\") {\n        description = $.ATTACHMENT_TOO_LARGE();\n      } else {\n        description = $.ATTACHMENT_TOO_LARGE(\n          maxAttachmentSize\n            ? formatFileSize(maxAttachmentSize, $.locale)\n            : undefined\n        );\n      }\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;AAWA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAEA;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEN;AAAC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AAEe;AAAY;AAA4B;AAAU;AAAA;AAGvE;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACG;AACA;AACC;AACX;AAEA;AAAA;AAGV;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACS;AACL;AACX;AAEA;AAAA;AAGV;AAEA;AAA2B;AACzB;AACoB;AAEtB;AAKE;AACA;AAGA;AACE;AAA0B;AAG5B;AAME;AACE;AACG;AACC;AACA;AACA;AACF;AAIJ;AACE;AACG;AACC;AACA;AACA;AACF;AAEJ;AAGF;AAAQ;AAAwC;AAClD;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AACG;AAAe;AAAuC;AACrD;AAAC;AAAe;AAA2B;AAAa;AAErD;AAAe;AAAgC;AAAc;AAAA;AAItE;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AACE;AAAqC;AAErC;AAAgB;AAGV;AACN;AACF;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACqE;AACzC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;"}

package/dist/components/internal/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useUser } from \"@liveblocks/react\";\nimport type { ComponentProps } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\nimport { getInitials } from \"../../utils/get-initials\";\n\nexport interface AvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nexport function Avatar({ userId, className, ...props }: AvatarProps) {\n  const { user, isLoading } = useUser(userId);\n  const resolvedUserName = useMemo(() => user?.name, [user]);\n  const resolvedUserAvatar = useMemo(() => user?.avatar, [user]);\n  const resolvedUserInitials = useMemo(\n    () => (resolvedUserName ? getInitials(resolvedUserName) : undefined),\n    [resolvedUserName]\n  );\n  const resolvedUserIdInitials = useMemo(\n    () => (!isLoading && !user ? getInitials(userId) : undefined),\n    [isLoading, user, userId]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {resolvedUserAvatar && (\n        <img\n          className=\"lb-avatar-image\"\n          src={resolvedUserAvatar}\n          alt={resolvedUserName}\n        />\n      )}\n      {resolvedUserInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {resolvedUserInitials}\n        </span>\n      ) : resolvedUserIdInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-label={userId} title={userId}>\n          {resolvedUserIdInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAAA;AAgBO;AACL;AACA;AACA;AACA;AAA6B;AAC+B;AACzC;AAEnB;AAA+B;AACsB;AAC3B;AAG1B;AACG;AAC6C;AACb;AAC3B;AAEH;AACE;AACW;AACL;AACA;AACP;AAGC;AAAe;AAAgC;AAC7C;AAGF;AAAe;AAAiC;AAAe;AAC7D;AAED;AAAA;AAGV;;"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useUser } from \"@liveblocks/react\";\nimport type { ComponentProps } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\nimport { getInitials } from \"../../utils/get-initials\";\n\nexport interface AvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nexport function Avatar({ userId, className, ...props }: AvatarProps) {\n  const { user, isLoading } = useUser(userId);\n  const resolvedUserName = useMemo(() => user?.name, [user]);\n  const resolvedUserAvatar = useMemo(() => user?.avatar, [user]);\n  const resolvedUserInitials = useMemo(\n    () => (resolvedUserName ? getInitials(resolvedUserName) : undefined),\n    [resolvedUserName]\n  );\n  const resolvedUserIdInitials = useMemo(\n    () => (!isLoading && !user ? getInitials(userId) : undefined),\n    [isLoading, user, userId]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {resolvedUserAvatar && (\n        <img\n          className=\"lb-avatar-image\"\n          src={resolvedUserAvatar}\n          alt={resolvedUserName}\n        />\n      )}\n      {resolvedUserInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {resolvedUserInitials}\n        </span>\n      ) : resolvedUserIdInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-label={userId} title={userId}>\n          {resolvedUserIdInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAgBO;AACL;AACA;AACA;AACA;AAA6B;AAC+B;AACzC;AAEnB;AAA+B;AACsB;AAC3B;AAG1B;AACG;AAC6C;AACb;AAC3B;AAEH;AACE;AACW;AACL;AACA;AACP;AAGC;AAAe;AAAgC;AAC7C;AAGF;AAAe;AAAiC;AAAe;AAC7D;AAED;AAAA;AAGV;;"}

package/dist/components/internal/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useUser } from \"@liveblocks/react\";\nimport type { ComponentProps } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\nimport { getInitials } from \"../../utils/get-initials\";\n\nexport interface AvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nexport function Avatar({ userId, className, ...props }: AvatarProps) {\n  const { user, isLoading } = useUser(userId);\n  const resolvedUserName = useMemo(() => user?.name, [user]);\n  const resolvedUserAvatar = useMemo(() => user?.avatar, [user]);\n  const resolvedUserInitials = useMemo(\n    () => (resolvedUserName ? getInitials(resolvedUserName) : undefined),\n    [resolvedUserName]\n  );\n  const resolvedUserIdInitials = useMemo(\n    () => (!isLoading && !user ? getInitials(userId) : undefined),\n    [isLoading, user, userId]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {resolvedUserAvatar && (\n        <img\n          className=\"lb-avatar-image\"\n          src={resolvedUserAvatar}\n          alt={resolvedUserName}\n        />\n      )}\n      {resolvedUserInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {resolvedUserInitials}\n        </span>\n      ) : resolvedUserIdInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-label={userId} title={userId}>\n          {resolvedUserIdInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAAA;AAgBO;AACL;AACA;AACA;AACA;AAA6B;AAC+B;AACzC;AAEnB;AAA+B;AACsB;AAC3B;AAG1B;AACG;AAC6C;AACb;AAC3B;AAEH;AACE;AACW;AACL;AACA;AACP;AAGC;AAAe;AAAgC;AAC7C;AAGF;AAAe;AAAiC;AAAe;AAC7D;AAED;AAAA;AAGV;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useUser } from \"@liveblocks/react\";\nimport type { ComponentProps } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\nimport { getInitials } from \"../../utils/get-initials\";\n\nexport interface AvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nexport function Avatar({ userId, className, ...props }: AvatarProps) {\n  const { user, isLoading } = useUser(userId);\n  const resolvedUserName = useMemo(() => user?.name, [user]);\n  const resolvedUserAvatar = useMemo(() => user?.avatar, [user]);\n  const resolvedUserInitials = useMemo(\n    () => (resolvedUserName ? getInitials(resolvedUserName) : undefined),\n    [resolvedUserName]\n  );\n  const resolvedUserIdInitials = useMemo(\n    () => (!isLoading && !user ? getInitials(userId) : undefined),\n    [isLoading, user, userId]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {resolvedUserAvatar && (\n        <img\n          className=\"lb-avatar-image\"\n          src={resolvedUserAvatar}\n          alt={resolvedUserName}\n        />\n      )}\n      {resolvedUserInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {resolvedUserInitials}\n        </span>\n      ) : resolvedUserIdInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-label={userId} title={userId}>\n          {resolvedUserIdInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAgBO;AACL;AACA;AACA;AACA;AAA6B;AAC+B;AACzC;AAEnB;AAA+B;AACsB;AAC3B;AAG1B;AACG;AAC6C;AACb;AAC3B;AAEH;AACE;AACW;AACL;AACA;AACP;AAGC;AAAe;AAAgC;AAC7C;AAGF;AAAe;AAAiC;AAAe;AAC7D;AAED;AAAA;AAGV;;"}

package/dist/components/internal/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"toolbar\" | \"outline\" | \"primary\" | \"secondary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n  icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"icon\">\n>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, ...props }, forwardedRef) => {\n    return (\n      <CustomButton {...props} ref={forwardedRef}>\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n      </CustomButton>\n    );\n  }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, className, ...props }, forwardedRef) => {\n    return (\n      <CustomButton\n        {...props}\n        type=\"button\"\n        className={classNames(\"lb-select-button\", className)}\n        ref={forwardedRef}\n      >\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n        <span className=\"lb-select-button-chevron\">\n          <ChevronDownIcon />\n        </span>\n      </CustomButton>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AAAA;AAeO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AAC8C;AAC9C;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"toolbar\" | \"outline\" | \"primary\" | \"secondary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n  icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"icon\">\n>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, ...props }, forwardedRef) => {\n    return (\n      <CustomButton {...props} ref={forwardedRef}>\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n      </CustomButton>\n    );\n  }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, className, ...props }, forwardedRef) => {\n    return (\n      <CustomButton\n        {...props}\n        type=\"button\"\n        className={classNames(\"lb-select-button\", className)}\n        ref={forwardedRef}\n      >\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n        <span className=\"lb-select-button-chevron\">\n          <ChevronDownIcon />\n        </span>\n      </CustomButton>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;AAeO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AAC8C;AAC9C;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;;;"}

package/dist/components/internal/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"toolbar\" | \"outline\" | \"primary\" | \"secondary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n  icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"icon\">\n>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, ...props }, forwardedRef) => {\n    return (\n      <CustomButton {...props} ref={forwardedRef}>\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n      </CustomButton>\n    );\n  }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, className, ...props }, forwardedRef) => {\n    return (\n      <CustomButton\n        {...props}\n        type=\"button\"\n        className={classNames(\"lb-select-button\", className)}\n        ref={forwardedRef}\n      >\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n        <span className=\"lb-select-button-chevron\">\n          <ChevronDownIcon />\n        </span>\n      </CustomButton>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;AAAA;AAeO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AAC8C;AAC9C;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"toolbar\" | \"outline\" | \"primary\" | \"secondary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n  icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"icon\">\n>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, ...props }, forwardedRef) => {\n    return (\n      <CustomButton {...props} ref={forwardedRef}>\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n      </CustomButton>\n    );\n  }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, className, ...props }, forwardedRef) => {\n    return (\n      <CustomButton\n        {...props}\n        type=\"button\"\n        className={classNames(\"lb-select-button\", className)}\n        ref={forwardedRef}\n      >\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n        <span className=\"lb-select-button-chevron\">\n          <ChevronDownIcon />\n        </span>\n      </CustomButton>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAeO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AAC8C;AAC9C;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;"}

package/dist/components/internal/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUIConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={classNames(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAEN;AAAA;AACA;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AACH;AACF;AAAA;AAGN;AAEO;AAAqB;AAExB;AACG;AACoD;AAC/C;AACC;AAEJ;AACE;AAAe;AACb;AAED;AAED;AAAe;AAA0B;AACxC;AAAA;AACN;AAGN;;;;;;;"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUIConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={classNames(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAEN;AAAA;AACA;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AACH;AACF;AAAA;AAGN;AAEO;AAAqB;AAExB;AACG;AACoD;AAC/C;AACC;AAEJ;AACE;AAAe;AACb;AAED;AAED;AAAe;AAA0B;AACxC;AAAA;AACN;AAGN;;;;;;;"}

package/dist/components/internal/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUIConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={classNames(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;;AAAA;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAEN;AAAA;AACA;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AACH;AACF;AAAA;AAGN;AAEO;AAAqB;AAExB;AACG;AACoD;AAC/C;AACC;AAEJ;AACE;AAAe;AACb;AAED;AAED;AAAe;AAA0B;AACxC;AAAA;AACN;AAGN;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUIConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={classNames(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAEN;AAAA;AACA;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AACH;AACF;AAAA;AAGN;AAEO;AAAqB;AAExB;AACG;AACoD;AAC/C;AACC;AAEJ;AACE;AAAe;AACb;AAED;AAED;AAAe;AAA0B;AACxC;AAAA;AACN;AAGN;;"}

package/dist/components/internal/EmojiPicker.cjs

@@ -2,15 +2,16 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var PopoverPrimitive = require('@radix-ui/react-popover');
+var frimousse = require('frimousse');
 var react = require('react');
 var config = require('../../config.cjs');
 var constants = require('../../constants.cjs');
 var Search = require('../../icons/Search.cjs');
 var Spinner = require('../../icons/Spinner.cjs');
 var overrides = require('../../overrides.cjs');
-var index = require('../../primitives/EmojiPicker/index.cjs');
 var classNames = require('../../utils/class-names.cjs');
 var Emoji = require('./Emoji.cjs');
+var Tooltip = require('./Tooltip.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -31,40 +32,31 @@ function _interopNamespaceDefault(e) {
 
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 
-function EmojiPickerLoading({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-loading lb-emoji-picker-loading", className),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {})
-  });
-}
-function EmojiPickerEmpty({
+function EmojiPickerListEmoji({
+  emoji,
   className,
   ...props
 }) {
-  const $ = overrides.useOverrides();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-empty lb-emoji-picker-empty", className),
+  return /* @__PURE__ */ jsxRuntime.jsx("button", {
+    className: classNames.classNames("lb-emoji-picker-emoji", className),
     ...props,
-    children: $.EMOJI_PICKER_EMPTY
+    children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, {
+      emoji: emoji.emoji
+    })
   });
 }
-function EmojiPickerError({
-  error,
+function EmojiPickerListRow({
+  children,
   className,
   ...props
 }) {
-  const $ = overrides.useOverrides();
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-error lb-emoji-picker-error", className),
+    className: classNames.classNames("lb-emoji-picker-row", className),
     ...props,
-    children: $.EMOJI_PICKER_ERROR(error)
+    children
   });
 }
-function EmojiPickerCategoryHeader({
+function EmojiPickerListCategoryHeader({
   category,
   className,
   ...props
@@ -74,53 +66,7 @@ function EmojiPickerCategoryHeader({
     ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx("span", {
       className: "lb-emoji-picker-category-header-title",
-      children: category
-    })
-  });
-}
-function EmojiPickerGrid({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-emoji-picker-grid", className),
-    ...props,
-    children
-  });
-}
-function EmojiPickerRow({
-  attributes,
-  children,
-  className,
-  ...props
-}) {
-  const isFirstRow = react.useMemo(
-    () => attributes.categoryRowIndex === 0,
-    [attributes.categoryRowIndex]
-  );
-  const isLastRow = react.useMemo(
-    () => attributes.categoryRowIndex === attributes.categoryRowsCount - 1,
-    [attributes.categoryRowIndex, attributes.categoryRowsCount]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-emoji-picker-row", className),
-    "data-first": isFirstRow ? "" : void 0,
-    "data-last": isLastRow ? "" : void 0,
-    ...props,
-    children
-  });
-}
-function EmojiPickerEmoji({
-  emoji,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("button", {
-    className: classNames.classNames("lb-emoji-picker-emoji", className),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, {
-      emoji
+      children: category.label
     })
   });
 }
@@ -137,7 +83,7 @@ const EmojiPicker = react.forwardRef(
       [onOpenChange]
     );
     const handleEmojiSelect = react.useCallback(
-      (emoji) => {
+      ({ emoji }) => {
         setOpen(false);
         onEmojiSelect?.(emoji);
       },
@@ -161,16 +107,19 @@ const EmojiPicker = react.forwardRef(
             ),
             ...props,
             ref: forwardedRef,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(index.Root, {
+            asChild: true,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(frimousse.EmojiPicker.Root, {
               onEmojiSelect: handleEmojiSelect,
               locale: $.locale,
+              emojiVersion: 15.1,
+              columns: 10,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", {
                   className: "lb-emoji-picker-header",
                   children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
                     className: "lb-emoji-picker-search-container",
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(index.Search, {
+                      /* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.Search, {
                         className: "lb-emoji-picker-search",
                         placeholder: $.EMOJI_PICKER_SEARCH_PLACEHOLDER,
                         autoFocus: true
@@ -179,17 +128,54 @@ const EmojiPicker = react.forwardRef(
                     ]
                   })
                 }),
-                /* @__PURE__ */ jsxRuntime.jsx(index.Content, {
+                /* @__PURE__ */ jsxRuntime.jsxs(frimousse.EmojiPicker.Viewport, {
                   className: "lb-emoji-picker-content",
-                  components: {
-                    Loading: EmojiPickerLoading,
-                    Empty: EmojiPickerEmpty,
-                    Error: EmojiPickerError,
-                    CategoryHeader: EmojiPickerCategoryHeader,
-                    Grid: EmojiPickerGrid,
-                    Row: EmojiPickerRow,
-                    Emoji: EmojiPickerEmoji
-                  }
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.Loading, {
+                      className: "lb-loading lb-emoji-picker-loading",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {})
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.Empty, {
+                      className: "lb-empty lb-emoji-picker-empty",
+                      children: $.EMOJI_PICKER_EMPTY
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.List, {
+                      className: "lb-emoji-picker-list",
+                      components: {
+                        CategoryHeader: EmojiPickerListCategoryHeader,
+                        Row: EmojiPickerListRow,
+                        Emoji: EmojiPickerListEmoji
+                      }
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                  className: "lb-emoji-picker-footer",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.ActiveEmoji, {
+                      children: ({ emoji }) => emoji ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            className: "lb-emoji-picker-active-emoji",
+                            children: emoji.emoji
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", {
+                            className: "lb-emoji-picker-active-emoji-label",
+                            children: emoji.label
+                          })
+                        ]
+                      }) : /* @__PURE__ */ jsxRuntime.jsx("span", {
+                        className: "lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder",
+                        children: "Select an emoji\u2026"
+                      })
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                      content: $.EMOJI_PICKER_CHANGE_SKIN_TONE,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.SkinToneSelector, {
+                        className: "lb-button lb-emoji-picker-skin-tone-selector"
+                      })
+                    })
+                  ]
                 })
               ]
             })