@liveblocks/react-ui 3.15.0-thread2 → 3.15.1-rc1

package/dist/components/Thread.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.js","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type BaseMetadata,\n  type CommentData,\n  type DCM,\n  type DTM,\n  findLastIndex,\n  Permission,\n  type ThreadData,\n} from \"@liveblocks/core\";\nimport {\n  useMarkRoomThreadAsRead,\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n  useRoomPermissions,\n  useRoomThreadSubscription,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n  Fragment,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefAttributes,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckCircleIcon } from \"../icons/CheckCircle\";\nimport { CheckCircleFillIcon } from \"../icons/CheckCircleFill\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useStableComponent } from \"../utils/use-stable-component\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\nimport { useWindowFocus } from \"../utils/use-window-focus\";\nimport { Comment as DefaultComment, type CommentProps } from \"./Comment\";\nimport { Composer, type ComposerProps } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\n// An invisible marker used to mark a thread as read only when it becomes visible.\nfunction MarkThreadAsReadMarker({ thread }: { thread: ThreadData }) {\n  const { id: threadId, roomId } = thread;\n  const ref = useRef<HTMLDivElement>(null);\n  const markThreadAsRead = useMarkRoomThreadAsRead(roomId);\n  const isWindowFocused = useWindowFocus();\n\n  useIntersectionCallback(\n    ref,\n    (isIntersecting) => {\n      if (isIntersecting) {\n        markThreadAsRead(threadId);\n      }\n    },\n    {\n      // The underlying IntersectionObserver is only enabled when the window is focused\n      enabled: isWindowFocused,\n    }\n  );\n\n  return (\n    <div\n      ref={ref}\n      style={{ height: 0 }}\n      aria-hidden\n      data-mark-as-read-marker=\"\"\n    />\n  );\n}\n\nexport interface ThreadComponents<\n  // Future components might reference thread metadata so we declare it\n  // already to respect the `TM` → `CM` order used everywhere else.\n  _TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> {\n  /**\n   * The component used to display comments.\n   */\n  Comment: ComponentType<CommentProps<CM>>;\n}\n\nexport interface ThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<TM, CM>;\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   * Add (or change) items to display in a comment's dropdown.\n   */\n  commentDropdownItems?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => ReactNode);\n\n  /**\n   * The maximum number of comments to show.\n   *\n   * The first and last comments are always shown and by default if some comments\n   * are hidden, only the first comment will be shown before the \"show more\" button\n   * and after it will be shown all the newest comments to fit the limit set.\n   *\n   * It's possible to customize this by setting `maxVisibleComments` to an object:\n   *\n   * @example\n   * // Only show the last comment, and all the older ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"oldest\" }} />\n   *\n   * @example\n   * // Show as many old comments as new ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"both\" }} />\n   */\n  maxVisibleComments?:\n    | number\n    | { max: number; show: \"oldest\" | \"both\" | \"newest\" };\n\n  /**\n   * Whether to blur the composer editor when the composer is submitted.\n   */\n  blurComposerOnSubmit?: ComposerProps[\"blurOnSubmit\"];\n\n  /**\n   * Whether to indent the comments' content.\n   */\n  indentCommentContent?: CommentProps[\"indentContent\"];\n\n  /**\n   * Additional content to display below the thread's comments.\n   */\n  additionalContent?: ReactNode;\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<TM, CM>) => 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   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & ThreadComponents>;\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  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\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      maxVisibleComments,\n      commentDropdownItems,\n      additionalContent,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      blurComposerOnSubmit,\n      overrides,\n      components,\n      className,\n      ...props\n    }: ThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const Comment = useStableComponent(components?.Comment, DefaultComment);\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const [showAllComments, setShowAllComments] = useState(false);\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) => Boolean(comment.body));\n    }, [showDeletedComments, thread.comments]);\n    const hiddenComments = useMemo(() => {\n      const maxVisibleCommentsCount =\n        typeof maxVisibleComments === \"number\"\n          ? maxVisibleComments\n          : maxVisibleComments?.max;\n      const visibleCommentsShow =\n        (typeof maxVisibleComments === \"object\"\n          ? maxVisibleComments?.show\n          : undefined) ?? \"newest\";\n\n      // If we explicitly want to show all comments or there's no limit set,\n      // no need to hide any comments.\n      if (showAllComments || maxVisibleCommentsCount === undefined) {\n        return;\n      }\n\n      const comments = thread.comments\n        .map((comment, index) => ({ comment, index }))\n        .filter(({ comment }) => showDeletedComments || comment.body);\n\n      // There aren't enough comments so no need to hide any.\n      if (comments.length <= Math.max(maxVisibleCommentsCount, 2)) {\n        return;\n      }\n\n      const firstVisibleComment = comments[0]!;\n      const lastVisibleComment = comments[comments.length - 1]!;\n\n      // Always show the first and last comments even if the limit is set to lower than 2.\n      if (maxVisibleCommentsCount <= 2) {\n        const firstHiddenCommentIndex =\n          comments[1]?.index ?? firstVisibleComment.index;\n        const lastHiddenCommentIndex =\n          comments[comments.length - 2]?.index ?? lastVisibleComment.index;\n\n        return {\n          firstIndex: firstHiddenCommentIndex,\n          lastIndex: lastHiddenCommentIndex,\n          count: comments.slice(1, comments.length - 1).length,\n        };\n      }\n\n      const remainingVisibleCommentsCount = maxVisibleCommentsCount - 2;\n\n      // Split the remaining visible comments before, after, or equally.\n      const beforeVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? remainingVisibleCommentsCount\n          : visibleCommentsShow === \"newest\"\n            ? 0\n            : Math.floor(remainingVisibleCommentsCount / 2);\n      const afterVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? 0\n          : visibleCommentsShow === \"newest\"\n            ? remainingVisibleCommentsCount\n            : Math.ceil(remainingVisibleCommentsCount / 2);\n\n      // The first comment is always visible so `+ 1` to skip it.\n      const firstHiddenComment = comments[1 + beforeVisibleCommentsCount];\n      // The last comment is always visible so `- 2` to skip it.\n      const lastHiddenComment =\n        comments[comments.length - 2 - afterVisibleCommentsCount];\n\n      // There aren't any comments to hide besides the first and last ones.\n      if (\n        !firstHiddenComment ||\n        !lastHiddenComment ||\n        firstHiddenComment.index > lastHiddenComment.index\n      ) {\n        return;\n      }\n\n      return {\n        firstIndex: firstHiddenComment.index,\n        lastIndex: lastHiddenComment.index,\n        count: thread.comments\n          .slice(firstHiddenComment.index, lastHiddenComment.index + 1)\n          .filter((comment) => showDeletedComments || comment.body).length,\n      };\n    }, [\n      maxVisibleComments,\n      showAllComments,\n      showDeletedComments,\n      thread.comments,\n    ]);\n    const {\n      status: subscriptionStatus,\n      unreadSince,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\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 permissions = useRoomPermissions(thread.roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : true;\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    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\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              const isHidden =\n                hiddenComments &&\n                index >= hiddenComments.firstIndex &&\n                index <= hiddenComments.lastIndex;\n              const isHiddenBecauseDeleted =\n                !showDeletedComments && !comment.body;\n              const isFirstHiddenComment =\n                isHidden && index === hiddenComments.firstIndex;\n\n              if (isFirstHiddenComment) {\n                return (\n                  <div\n                    key={`${comment.id}-show-more`}\n                    className=\"lb-thread-show-more\"\n                  >\n                    <Button\n                      variant=\"ghost\"\n                      className=\"lb-thread-show-more-button\"\n                      onClick={() => setShowAllComments(true)}\n                    >\n                      {$.THREAD_SHOW_MORE_COMMENTS(hiddenComments.count)}\n                    </Button>\n                  </div>\n                );\n              }\n\n              if (isHidden || isHiddenBecauseDeleted) {\n                return null;\n              }\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                  components={components}\n                  actionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  actions={\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                                <CheckCircleFillIcon />\n                              ) : (\n                                <CheckCircleIcon />\n                              )\n                            }\n                            disabled={!canComment}\n                          />\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                  internalDropdownItems={\n                    isFirstComment ? (\n                      <DefaultComment.DropdownItem\n                        onSelect={handleSubscribeChange}\n                        icon={\n                          subscriptionStatus === \"subscribed\" ? (\n                            <BellCrossedIcon />\n                          ) : (\n                            <BellIcon />\n                          )\n                        }\n                      >\n                        {subscriptionStatus === \"subscribed\"\n                          ? $.THREAD_UNSUBSCRIBE\n                          : $.THREAD_SUBSCRIBE}\n                      </DefaultComment.DropdownItem>\n                    ) : undefined\n                  }\n                  dropdownItems={\n                    commentDropdownItems as CommentProps[\"dropdownItems\"]\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          {unreadIndex !== undefined && (\n            <MarkThreadAsReadMarker thread={thread} />\n          )}\n          {additionalContent}\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              blurOnSubmit={blurComposerOnSubmit}\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 <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2DA;AACE;AACA;AACA;AACA;AAEA;AAAA;AACE;AAEE;AACE;AAAyB;AAC3B;AACF;AACA;AAAA;AAEW;AACX;AAGF;AACE;AAAC;AAAA;AACC;AACmB;AACR;AACc;AAAA;AAG/B;AAsKO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAEqE;AAEvE;AACE;AAIA;AAOA;AACE;AAAA;AAGF;AAKA;AACE;AAAA;AAGF;AACA;AAGA;AACE;AAEA;AAGA;AAAO;AACO;AACD;AACmC;AAChD;AAGF;AAGA;AAMA;AAQA;AAEA;AAIA;AAKE;AAAA;AAGF;AAAO;AAC0B;AACF;AAG+B;AAC9D;AACC;AACD;AACA;AACA;AACO;AAET;AAAM;AACI;AACR;AACA;AACA;AAEF;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;AACA;AAMA;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;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AAEI;AAAC;AAAA;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEL;AAEI;AACA;AAEA;AAIA;AAEA;AAGA;AACE;AACE;AAAC;AAAA;AAEW;AAEV;AAAC;AAAA;AACS;AACE;AAC4B;AAEW;AAAA;AACnD;AAAA;AATkB;AAUpB;AAIJ;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AAEC;AACU;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AAGA;AACiB;AACjB;AACA;AACA;AACA;AAEyC;AAIrC;AAAC;AAAA;AAIS;AAGR;AAAiB;AAAhB;AACiB;AACC;AACV;AAEP;AAAC;AAAA;AACW;AACD;AAID;AAMa;AAGV;AAAA;AACb;AAAA;AACF;AAAA;AAEA;AAIF;AAAgB;AAAf;AACW;AAKI;AAMR;AAAA;AAEN;AAGJ;AAAA;AA5EW;AAiFjB;AAII;AAAA;AAAC;AAAA;AACW;AACI;AAGZ;AAA8D;AAC3D;AACL;AAAA;AACF;AACC;AAGH;AAGN;AAE0C;AAEzC;AAEC;AAAC;AAAA;AACW;AACO;AACuC;AACxD;AACwB;AACxB;AACc;AACH;AACe;AACP;AACd;AACL;AACe;AAAA;AACjB;AAAA;AAAA;AAGN;AAGN;;"}
+{"version":3,"file":"Thread.js","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type BaseMetadata,\n  type CommentData,\n  type DCM,\n  type DTM,\n  findLastIndex,\n  Permission,\n  type ThreadData,\n} from \"@liveblocks/core\";\nimport {\n  useMarkRoomThreadAsRead,\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n  useRoomPermissions,\n  useRoomThreadSubscription,\n} from \"@liveblocks/react/_private\";\nimport { Toggle as TogglePrimitive } from \"radix-ui\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n  Fragment,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefAttributes,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckCircleIcon } from \"../icons/CheckCircle\";\nimport { CheckCircleFillIcon } from \"../icons/CheckCircleFill\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useStableComponent } from \"../utils/use-stable-component\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\nimport { useWindowFocus } from \"../utils/use-window-focus\";\nimport { Comment as DefaultComment, type CommentProps } from \"./Comment\";\nimport { Composer, type ComposerProps } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\n// An invisible marker used to mark a thread as read only when it becomes visible.\nfunction MarkThreadAsReadMarker({ thread }: { thread: ThreadData }) {\n  const { id: threadId, roomId } = thread;\n  const ref = useRef<HTMLDivElement>(null);\n  const markThreadAsRead = useMarkRoomThreadAsRead(roomId);\n  const isWindowFocused = useWindowFocus();\n\n  useIntersectionCallback(\n    ref,\n    (isIntersecting) => {\n      if (isIntersecting) {\n        markThreadAsRead(threadId);\n      }\n    },\n    {\n      // The underlying IntersectionObserver is only enabled when the window is focused\n      enabled: isWindowFocused,\n    }\n  );\n\n  return (\n    <div\n      ref={ref}\n      style={{ height: 0 }}\n      aria-hidden\n      data-mark-as-read-marker=\"\"\n    />\n  );\n}\n\nexport interface ThreadComponents<\n  // Future components might reference thread metadata so we declare it\n  // already to respect the `TM` → `CM` order used everywhere else.\n  _TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> {\n  /**\n   * The component used to display comments.\n   */\n  Comment: ComponentType<CommentProps<CM>>;\n}\n\nexport interface ThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<TM, CM>;\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   * Add (or change) items to display in a comment's dropdown.\n   */\n  commentDropdownItems?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => ReactNode);\n\n  /**\n   * The maximum number of comments to show.\n   *\n   * The first and last comments are always shown and by default if some comments\n   * are hidden, only the first comment will be shown before the \"show more\" button\n   * and after it will be shown all the newest comments to fit the limit set.\n   *\n   * It's possible to customize this by setting `maxVisibleComments` to an object:\n   *\n   * @example\n   * // Only show the last comment, and all the older ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"oldest\" }} />\n   *\n   * @example\n   * // Show as many old comments as new ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"both\" }} />\n   */\n  maxVisibleComments?:\n    | number\n    | { max: number; show: \"oldest\" | \"both\" | \"newest\" };\n\n  /**\n   * Whether to blur the composer editor when the composer is submitted.\n   */\n  blurComposerOnSubmit?: ComposerProps[\"blurOnSubmit\"];\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<TM, CM>) => 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   * Whether to focus the composer on mount.\n   */\n  autoFocus?: ComposerProps[\"autoFocus\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & ThreadComponents<TM, CM>>;\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  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\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      maxVisibleComments,\n      commentDropdownItems,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      blurComposerOnSubmit,\n      autoFocus,\n      overrides,\n      components,\n      className,\n      ...props\n    }: ThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const Comment = useStableComponent(components?.Comment, DefaultComment);\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const [showAllComments, setShowAllComments] = useState(false);\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) => Boolean(comment.body));\n    }, [showDeletedComments, thread.comments]);\n    const commentsCount = useMemo(() => {\n      return showDeletedComments\n        ? thread.comments.length\n        : thread.comments.filter((comment) => comment.body).length;\n    }, [showDeletedComments, thread.comments]);\n    const hiddenComments = useMemo(() => {\n      const maxVisibleCommentsCount =\n        typeof maxVisibleComments === \"number\"\n          ? maxVisibleComments\n          : maxVisibleComments?.max;\n      const visibleCommentsShow =\n        (typeof maxVisibleComments === \"object\"\n          ? maxVisibleComments?.show\n          : undefined) ?? \"newest\";\n\n      // If we explicitly want to show all comments or there's no limit set,\n      // no need to hide any comments.\n      if (showAllComments || maxVisibleCommentsCount === undefined) {\n        return;\n      }\n\n      const comments = thread.comments\n        .map((comment, index) => ({ comment, index }))\n        .filter(({ comment }) => showDeletedComments || comment.body);\n\n      // There aren't enough comments so no need to hide any.\n      if (comments.length <= Math.max(maxVisibleCommentsCount, 2)) {\n        return;\n      }\n\n      const firstVisibleComment = comments[0]!;\n      const lastVisibleComment = comments[comments.length - 1]!;\n\n      // Always show the first and last comments even if the limit is set to lower than 2.\n      if (maxVisibleCommentsCount <= 2) {\n        const firstHiddenCommentIndex =\n          comments[1]?.index ?? firstVisibleComment.index;\n        const lastHiddenCommentIndex =\n          comments[comments.length - 2]?.index ?? lastVisibleComment.index;\n\n        return {\n          firstIndex: firstHiddenCommentIndex,\n          lastIndex: lastHiddenCommentIndex,\n          count: comments.slice(1, comments.length - 1).length,\n        };\n      }\n\n      const remainingVisibleCommentsCount = maxVisibleCommentsCount - 2;\n\n      // Split the remaining visible comments before, after, or equally.\n      const beforeVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? remainingVisibleCommentsCount\n          : visibleCommentsShow === \"newest\"\n            ? 0\n            : Math.floor(remainingVisibleCommentsCount / 2);\n      const afterVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? 0\n          : visibleCommentsShow === \"newest\"\n            ? remainingVisibleCommentsCount\n            : Math.ceil(remainingVisibleCommentsCount / 2);\n\n      // The first comment is always visible so `+ 1` to skip it.\n      const firstHiddenComment = comments[1 + beforeVisibleCommentsCount];\n      // The last comment is always visible so `- 2` to skip it.\n      const lastHiddenComment =\n        comments[comments.length - 2 - afterVisibleCommentsCount];\n\n      // There aren't any comments to hide besides the first and last ones.\n      if (\n        !firstHiddenComment ||\n        !lastHiddenComment ||\n        firstHiddenComment.index > lastHiddenComment.index\n      ) {\n        return;\n      }\n\n      return {\n        firstIndex: firstHiddenComment.index,\n        lastIndex: lastHiddenComment.index,\n        count: thread.comments\n          .slice(firstHiddenComment.index, lastHiddenComment.index + 1)\n          .filter((comment) => showDeletedComments || comment.body).length,\n      };\n    }, [\n      maxVisibleComments,\n      showAllComments,\n      showDeletedComments,\n      thread.comments,\n    ]);\n    const {\n      status: subscriptionStatus,\n      unreadSince,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\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 permissions = useRoomPermissions(thread.roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : true;\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    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    let currentCommentIndex = 0;\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\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\" role=\"feed\">\n            {thread.comments.map((comment, index) => {\n              const isNonDeletedComment = showDeletedComments || comment.body;\n              const isFirstComment = index === firstCommentIndex;\n              const isUnread =\n                unreadIndex !== undefined && index >= unreadIndex;\n              const isHidden =\n                hiddenComments &&\n                index >= hiddenComments.firstIndex &&\n                index <= hiddenComments.lastIndex;\n              const isHiddenBecauseDeleted =\n                !showDeletedComments && !comment.body;\n              const isFirstHiddenComment =\n                isHidden && index === hiddenComments.firstIndex;\n\n              if (isFirstHiddenComment) {\n                return (\n                  <div\n                    key={`${comment.id}:show-more`}\n                    className=\"lb-thread-show-more\"\n                  >\n                    <Button\n                      variant=\"ghost\"\n                      className=\"lb-thread-show-more-button\"\n                      onClick={() => setShowAllComments(true)}\n                    >\n                      {$.THREAD_SHOW_MORE_COMMENTS(hiddenComments.count)}\n                    </Button>\n                  </div>\n                );\n              }\n\n              if (isHidden || isHiddenBecauseDeleted) {\n                return null;\n              }\n\n              if (isNonDeletedComment) {\n                currentCommentIndex++;\n              }\n\n              const children = (\n                <Comment\n                  key={comment.id}\n                  tabIndex={0}\n                  aria-posinset={currentCommentIndex}\n                  aria-setsize={commentsCount}\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                  components={components}\n                  actionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  actions={\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                                <CheckCircleFillIcon />\n                              ) : (\n                                <CheckCircleIcon />\n                              )\n                            }\n                            disabled={!canComment}\n                          />\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                  internalDropdownItems={\n                    isFirstComment ? (\n                      <DefaultComment.DropdownItem\n                        onSelect={handleSubscribeChange}\n                        icon={\n                          subscriptionStatus === \"subscribed\" ? (\n                            <BellCrossedIcon />\n                          ) : (\n                            <BellIcon />\n                          )\n                        }\n                      >\n                        {subscriptionStatus === \"subscribed\"\n                          ? $.THREAD_UNSUBSCRIBE\n                          : $.THREAD_SUBSCRIBE}\n                      </DefaultComment.DropdownItem>\n                    ) : undefined\n                  }\n                  dropdownItems={\n                    commentDropdownItems as CommentProps[\"dropdownItems\"]\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          {unreadIndex !== undefined && (\n            <MarkThreadAsReadMarker thread={thread} />\n          )}\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              blurOnSubmit={blurComposerOnSubmit}\n              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n                ...overrides,\n              }}\n              roomId={thread.roomId}\n              autoFocus={autoFocus}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2DA;AACE;AACA;AACA;AACA;AAEA;AAAA;AACE;AAEE;AACE;AAAyB;AAC3B;AACF;AACA;AAAA;AAEW;AACX;AAGF;AACE;AAAC;AAAA;AACC;AACmB;AACR;AACc;AAAA;AAG/B;AAsKO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAEqE;AAEvE;AACE;AAEsD;AAExD;AACE;AAIA;AAOA;AACE;AAAA;AAGF;AAKA;AACE;AAAA;AAGF;AACA;AAGA;AACE;AAEA;AAGA;AAAO;AACO;AACD;AACmC;AAChD;AAGF;AAGA;AAMA;AAQA;AAEA;AAIA;AAKE;AAAA;AAGF;AAAO;AAC0B;AACF;AAG+B;AAC9D;AACC;AACD;AACA;AACA;AACO;AAET;AAAM;AACI;AACR;AACA;AACA;AAEF;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;AACA;AAMA;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;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AAEA;AAEI;AAAC;AAAA;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEL;AAEI;AACA;AACA;AAEA;AAIA;AAEA;AAGA;AACE;AACE;AAAC;AAAA;AAEW;AAEV;AAAC;AAAA;AACS;AACE;AAC4B;AAEW;AAAA;AACnD;AAAA;AATkB;AAUpB;AAIJ;AACE;AAAO;AAGT;AACE;AAAA;AAGF;AACE;AAAC;AAAA;AAEW;AACK;AACD;AACd;AACU;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AAGA;AACiB;AACjB;AACA;AACA;AACA;AAEyC;AAIrC;AAAC;AAAA;AAIS;AAGR;AAAiB;AAAhB;AACiB;AACC;AACV;AAEP;AAAC;AAAA;AACW;AACD;AAID;AAMa;AAGV;AAAA;AACb;AAAA;AACF;AAAA;AAEA;AAIF;AAAgB;AAAf;AACW;AAKI;AAMR;AAAA;AAEN;AAGJ;AAAA;AA/EW;AAoFjB;AAII;AAAA;AAAC;AAAA;AACW;AACI;AAGZ;AAA8D;AAC3D;AACL;AAAA;AACF;AACC;AAGH;AAGN;AAE0C;AAGxC;AAAC;AAAA;AACW;AACO;AACuC;AACxD;AACwB;AACxB;AACc;AACH;AACe;AACP;AACd;AACL;AACe;AACf;AAAA;AACF;AAAA;AAAA;AAGN;AAGN;;"}

package/dist/components/internal/AiComposer.cjs

@@ -11,7 +11,6 @@ var contexts = require('../../primitives/AiComposer/contexts.cjs');
 var cn = require('../../utils/cn.cjs');
 var Button = require('./Button.cjs');
 var Tooltip = require('./Tooltip.cjs');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
 
 function AiComposerAction({
   overrides: overrides$1
@@ -78,7 +77,7 @@ const AiComposer = react.forwardRef(
       },
       [onComposerSubmit, sendAiMessage, onComposerSubmitted]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
       index.AiComposerForm,
       {
         className: cn.cn(

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

@@ -1 +1 @@
-{"version":3,"file":"AiComposer.cjs","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n  type AiChatMessage,\n  type CopilotId,\n  type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n  type ComponentProps,\n  type FormEvent,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n  type AiComposerOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n  AiComposerEditorProps,\n  AiComposerFormProps,\n  AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n  extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n  /**\n   * The composer's initial value.\n   */\n  defaultValue?: string;\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: (\n    message: AiComposerSubmitMessage,\n    event: FormEvent<HTMLFormElement>\n  ) => void;\n\n  /**\n   * The event handler called after the composer is submitted.\n   *\n   * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n   */\n  onComposerSubmitted?: (message: AiChatMessage) => void;\n\n  /**\n   * Whether the composer is disabled.\n   */\n  disabled?: AiComposerFormProps[\"disabled\"];\n\n  /**\n   * Whether to focus the composer on mount.\n   */\n  autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: CopilotId;\n\n  /**\n   * The time, in milliseconds, before an AI response will timeout.\n   */\n  responseTimeout?: number;\n\n  /**\n   * @internal\n   */\n  branchId?: MessageId;\n\n  /**\n   * @internal\n   */\n  stream?: boolean;\n}\n\nfunction AiComposerAction({\n  overrides,\n}: {\n  overrides?: AiComposerProps[\"overrides\"];\n}) {\n  const { canAbort } = useAiComposer();\n  const $ = useOverrides(overrides);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return canAbort ? (\n    <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n      <AiComposerPrimitive.Abort asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"secondary\"\n          aria-label={$.AI_COMPOSER_ABORT}\n          icon={<StopIcon />}\n        />\n      </AiComposerPrimitive.Abort>\n    </ShortcutTooltip>\n  ) : (\n    <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n      <AiComposerPrimitive.Submit asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"primary\"\n          aria-label={$.AI_COMPOSER_SEND}\n          icon={<SendIcon />}\n        />\n      </AiComposerPrimitive.Submit>\n    </ShortcutTooltip>\n  );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n  (\n    {\n      defaultValue,\n      onComposerSubmit,\n      disabled,\n      autoFocus,\n      overrides,\n      className,\n      chatId,\n      branchId,\n      copilotId,\n      responseTimeout,\n      stream = true,\n      onComposerSubmitted,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const sendAiMessage = useSendAiMessage(chatId, {\n      stream,\n      copilotId,\n      timeout: responseTimeout,\n    });\n\n    const handleComposerSubmit = useCallback(\n      (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(message, event);\n\n        if (event.isDefaultPrevented()) return;\n\n        const newMessage = sendAiMessage(message.text);\n\n        onComposerSubmitted?.(newMessage);\n      },\n      [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n    );\n\n    return (\n      <TooltipProvider>\n        <AiComposerPrimitive.Form\n          className={cn(\n            \"lb-root lb-ai-composer lb-ai-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          disabled={disabled}\n          ref={forwardedRef}\n          onComposerSubmit={handleComposerSubmit}\n          chatId={chatId}\n          branchId={branchId}\n        >\n          <div className=\"lb-ai-composer-editor-container\">\n            <AiComposerPrimitive.Editor\n              autoFocus={autoFocus}\n              className=\"lb-ai-composer-editor\"\n              placeholder={$.AI_COMPOSER_PLACEHOLDER}\n              defaultValue={defaultValue}\n            />\n\n            <div className=\"lb-ai-composer-footer\">\n              <div className=\"lb-ai-composer-editor-actions\">\n                {/* No actions for now but it makes sense to keep the DOM structure */}\n              </div>\n\n              <div className=\"lb-ai-composer-actions\">\n                <AiComposerAction overrides={overrides} />\n              </div>\n            </div>\n          </div>\n        </AiComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":["overrides","useAiComposer","useOverrides","useCallback","jsx","ShortcutTooltip","AiComposerPrimitive.Abort","Button","StopIcon","AiComposerPrimitive.Submit","SendIcon","forwardRef","useSendAiMessage","TooltipProvider","AiComposerPrimitive.Form","cn","jsxs","AiComposerPrimitive.Editor"],"mappings":"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"}
+{"version":3,"file":"AiComposer.cjs","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n  type AiChatMessage,\n  type CopilotId,\n  type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n  type ComponentProps,\n  type FormEvent,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n  type AiComposerOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n  AiComposerEditorProps,\n  AiComposerFormProps,\n  AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n  extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n  /**\n   * The composer's initial value.\n   */\n  defaultValue?: string;\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: (\n    message: AiComposerSubmitMessage,\n    event: FormEvent<HTMLFormElement>\n  ) => void;\n\n  /**\n   * The event handler called after the composer is submitted.\n   *\n   * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n   */\n  onComposerSubmitted?: (message: AiChatMessage) => void;\n\n  /**\n   * Whether the composer is disabled.\n   */\n  disabled?: AiComposerFormProps[\"disabled\"];\n\n  /**\n   * Whether to focus the composer on mount.\n   */\n  autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: CopilotId;\n\n  /**\n   * The time, in milliseconds, before an AI response will timeout.\n   */\n  responseTimeout?: number;\n\n  /**\n   * @internal\n   */\n  branchId?: MessageId;\n\n  /**\n   * @internal\n   */\n  stream?: boolean;\n}\n\nfunction AiComposerAction({\n  overrides,\n}: {\n  overrides?: AiComposerProps[\"overrides\"];\n}) {\n  const { canAbort } = useAiComposer();\n  const $ = useOverrides(overrides);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return canAbort ? (\n    <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n      <AiComposerPrimitive.Abort asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"secondary\"\n          aria-label={$.AI_COMPOSER_ABORT}\n          icon={<StopIcon />}\n        />\n      </AiComposerPrimitive.Abort>\n    </ShortcutTooltip>\n  ) : (\n    <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n      <AiComposerPrimitive.Submit asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"primary\"\n          aria-label={$.AI_COMPOSER_SEND}\n          icon={<SendIcon />}\n        />\n      </AiComposerPrimitive.Submit>\n    </ShortcutTooltip>\n  );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n  (\n    {\n      defaultValue,\n      onComposerSubmit,\n      disabled,\n      autoFocus,\n      overrides,\n      className,\n      chatId,\n      branchId,\n      copilotId,\n      responseTimeout,\n      stream = true,\n      onComposerSubmitted,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const sendAiMessage = useSendAiMessage(chatId, {\n      stream,\n      copilotId,\n      timeout: responseTimeout,\n    });\n\n    const handleComposerSubmit = useCallback(\n      (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(message, event);\n\n        if (event.isDefaultPrevented()) return;\n\n        const newMessage = sendAiMessage(message.text);\n\n        onComposerSubmitted?.(newMessage);\n      },\n      [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n    );\n\n    return (\n      <TooltipProvider>\n        <AiComposerPrimitive.Form\n          className={cn(\n            \"lb-root lb-ai-composer lb-ai-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          disabled={disabled}\n          ref={forwardedRef}\n          onComposerSubmit={handleComposerSubmit}\n          chatId={chatId}\n          branchId={branchId}\n        >\n          <div className=\"lb-ai-composer-editor-container\">\n            <AiComposerPrimitive.Editor\n              autoFocus={autoFocus}\n              className=\"lb-ai-composer-editor\"\n              placeholder={$.AI_COMPOSER_PLACEHOLDER}\n              defaultValue={defaultValue}\n            />\n\n            <div className=\"lb-ai-composer-footer\">\n              <div className=\"lb-ai-composer-editor-actions\">\n                {/* No actions for now but it makes sense to keep the DOM structure */}\n              </div>\n\n              <div className=\"lb-ai-composer-actions\">\n                <AiComposerAction overrides={overrides} />\n              </div>\n            </div>\n          </div>\n        </AiComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":["overrides","useAiComposer","useOverrides","useCallback","jsx","ShortcutTooltip","AiComposerPrimitive.Abort","Button","StopIcon","AiComposerPrimitive.Submit","SendIcon","forwardRef","useSendAiMessage","TooltipProvider","AiComposerPrimitive.Form","cn","jsxs","AiComposerPrimitive.Editor"],"mappings":"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"}

package/dist/components/internal/AiComposer.js

@@ -8,8 +8,7 @@ import { AiComposerAbort, AiComposerSubmit, AiComposerForm, Editor as AiComposer
 import { useAiComposer } from '../../primitives/AiComposer/contexts.js';
 import { cn } from '../../utils/cn.js';
 import { Button } from './Button.js';
-import { ShortcutTooltip } from './Tooltip.js';
-import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { ShortcutTooltip, TooltipProvider } from './Tooltip.js';
 
 function AiComposerAction({
   overrides

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

@@ -1 +1 @@
-{"version":3,"file":"AiComposer.js","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n  type AiChatMessage,\n  type CopilotId,\n  type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n  type ComponentProps,\n  type FormEvent,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n  type AiComposerOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n  AiComposerEditorProps,\n  AiComposerFormProps,\n  AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n  extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n  /**\n   * The composer's initial value.\n   */\n  defaultValue?: string;\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: (\n    message: AiComposerSubmitMessage,\n    event: FormEvent<HTMLFormElement>\n  ) => void;\n\n  /**\n   * The event handler called after the composer is submitted.\n   *\n   * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n   */\n  onComposerSubmitted?: (message: AiChatMessage) => void;\n\n  /**\n   * Whether the composer is disabled.\n   */\n  disabled?: AiComposerFormProps[\"disabled\"];\n\n  /**\n   * Whether to focus the composer on mount.\n   */\n  autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: CopilotId;\n\n  /**\n   * The time, in milliseconds, before an AI response will timeout.\n   */\n  responseTimeout?: number;\n\n  /**\n   * @internal\n   */\n  branchId?: MessageId;\n\n  /**\n   * @internal\n   */\n  stream?: boolean;\n}\n\nfunction AiComposerAction({\n  overrides,\n}: {\n  overrides?: AiComposerProps[\"overrides\"];\n}) {\n  const { canAbort } = useAiComposer();\n  const $ = useOverrides(overrides);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return canAbort ? (\n    <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n      <AiComposerPrimitive.Abort asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"secondary\"\n          aria-label={$.AI_COMPOSER_ABORT}\n          icon={<StopIcon />}\n        />\n      </AiComposerPrimitive.Abort>\n    </ShortcutTooltip>\n  ) : (\n    <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n      <AiComposerPrimitive.Submit asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"primary\"\n          aria-label={$.AI_COMPOSER_SEND}\n          icon={<SendIcon />}\n        />\n      </AiComposerPrimitive.Submit>\n    </ShortcutTooltip>\n  );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n  (\n    {\n      defaultValue,\n      onComposerSubmit,\n      disabled,\n      autoFocus,\n      overrides,\n      className,\n      chatId,\n      branchId,\n      copilotId,\n      responseTimeout,\n      stream = true,\n      onComposerSubmitted,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const sendAiMessage = useSendAiMessage(chatId, {\n      stream,\n      copilotId,\n      timeout: responseTimeout,\n    });\n\n    const handleComposerSubmit = useCallback(\n      (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(message, event);\n\n        if (event.isDefaultPrevented()) return;\n\n        const newMessage = sendAiMessage(message.text);\n\n        onComposerSubmitted?.(newMessage);\n      },\n      [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n    );\n\n    return (\n      <TooltipProvider>\n        <AiComposerPrimitive.Form\n          className={cn(\n            \"lb-root lb-ai-composer lb-ai-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          disabled={disabled}\n          ref={forwardedRef}\n          onComposerSubmit={handleComposerSubmit}\n          chatId={chatId}\n          branchId={branchId}\n        >\n          <div className=\"lb-ai-composer-editor-container\">\n            <AiComposerPrimitive.Editor\n              autoFocus={autoFocus}\n              className=\"lb-ai-composer-editor\"\n              placeholder={$.AI_COMPOSER_PLACEHOLDER}\n              defaultValue={defaultValue}\n            />\n\n            <div className=\"lb-ai-composer-footer\">\n              <div className=\"lb-ai-composer-editor-actions\">\n                {/* No actions for now but it makes sense to keep the DOM structure */}\n              </div>\n\n              <div className=\"lb-ai-composer-actions\">\n                <AiComposerAction overrides={overrides} />\n              </div>\n            </div>\n          </div>\n        </AiComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":["AiComposerPrimitive.Abort","AiComposerPrimitive.Submit","AiComposerPrimitive.Form","AiComposerPrimitive.Editor"],"mappings":"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"}
+{"version":3,"file":"AiComposer.js","sources":["../../../src/components/internal/AiComposer.tsx"],"sourcesContent":["import {\n  type AiChatMessage,\n  type CopilotId,\n  type MessageId,\n} from \"@liveblocks/core\";\nimport { useSendAiMessage } from \"@liveblocks/react\";\nimport {\n  type ComponentProps,\n  type FormEvent,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n} from \"react\";\n\nimport { SendIcon } from \"../../icons/Send\";\nimport { StopIcon } from \"../../icons/Stop\";\nimport {\n  type AiComposerOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiComposerPrimitive from \"../../primitives/AiComposer\";\nimport { useAiComposer } from \"../../primitives/AiComposer/contexts\";\nimport type {\n  AiComposerEditorProps,\n  AiComposerFormProps,\n  AiComposerSubmitMessage,\n} from \"../../primitives/AiComposer/types\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"./Button\";\nimport { ShortcutTooltip, TooltipProvider } from \"./Tooltip\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiComposer\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiComposerProps\n  extends Omit<ComponentProps<\"form\">, \"defaultValue\"> {\n  /**\n   * The composer's initial value.\n   */\n  defaultValue?: string;\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: (\n    message: AiComposerSubmitMessage,\n    event: FormEvent<HTMLFormElement>\n  ) => void;\n\n  /**\n   * The event handler called after the composer is submitted.\n   *\n   * @internal This API will change, and is not considered stable. DO NOT RELY on it.\n   */\n  onComposerSubmitted?: (message: AiChatMessage) => void;\n\n  /**\n   * Whether the composer is disabled.\n   */\n  disabled?: AiComposerFormProps[\"disabled\"];\n\n  /**\n   * Whether to focus the composer on mount.\n   */\n  autoFocus?: AiComposerEditorProps[\"autoFocus\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiComposerOverrides>;\n\n  /**\n   * The ID of the chat the composer belongs to.\n   */\n  chatId: string;\n\n  /**\n   * The ID of the copilot to use to send the message.\n   */\n  copilotId?: CopilotId;\n\n  /**\n   * The time, in milliseconds, before an AI response will timeout.\n   */\n  responseTimeout?: number;\n\n  /**\n   * @internal\n   */\n  branchId?: MessageId;\n\n  /**\n   * @internal\n   */\n  stream?: boolean;\n}\n\nfunction AiComposerAction({\n  overrides,\n}: {\n  overrides?: AiComposerProps[\"overrides\"];\n}) {\n  const { canAbort } = useAiComposer();\n  const $ = useOverrides(overrides);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return canAbort ? (\n    <ShortcutTooltip content={$.AI_COMPOSER_ABORT}>\n      <AiComposerPrimitive.Abort asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"secondary\"\n          aria-label={$.AI_COMPOSER_ABORT}\n          icon={<StopIcon />}\n        />\n      </AiComposerPrimitive.Abort>\n    </ShortcutTooltip>\n  ) : (\n    <ShortcutTooltip content={$.AI_COMPOSER_SEND} shortcut=\"Enter\">\n      <AiComposerPrimitive.Submit asChild>\n        <Button\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          className=\"lb-ai-composer-action\"\n          variant=\"primary\"\n          aria-label={$.AI_COMPOSER_SEND}\n          icon={<SendIcon />}\n        />\n      </AiComposerPrimitive.Submit>\n    </ShortcutTooltip>\n  );\n}\n\nexport const AiComposer = forwardRef<HTMLFormElement, AiComposerProps>(\n  (\n    {\n      defaultValue,\n      onComposerSubmit,\n      disabled,\n      autoFocus,\n      overrides,\n      className,\n      chatId,\n      branchId,\n      copilotId,\n      responseTimeout,\n      stream = true,\n      onComposerSubmitted,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const sendAiMessage = useSendAiMessage(chatId, {\n      stream,\n      copilotId,\n      timeout: responseTimeout,\n    });\n\n    const handleComposerSubmit = useCallback(\n      (message: AiComposerSubmitMessage, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(message, event);\n\n        if (event.isDefaultPrevented()) return;\n\n        const newMessage = sendAiMessage(message.text);\n\n        onComposerSubmitted?.(newMessage);\n      },\n      [onComposerSubmit, sendAiMessage, onComposerSubmitted]\n    );\n\n    return (\n      <TooltipProvider>\n        <AiComposerPrimitive.Form\n          className={cn(\n            \"lb-root lb-ai-composer lb-ai-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          disabled={disabled}\n          ref={forwardedRef}\n          onComposerSubmit={handleComposerSubmit}\n          chatId={chatId}\n          branchId={branchId}\n        >\n          <div className=\"lb-ai-composer-editor-container\">\n            <AiComposerPrimitive.Editor\n              autoFocus={autoFocus}\n              className=\"lb-ai-composer-editor\"\n              placeholder={$.AI_COMPOSER_PLACEHOLDER}\n              defaultValue={defaultValue}\n            />\n\n            <div className=\"lb-ai-composer-footer\">\n              <div className=\"lb-ai-composer-editor-actions\">\n                {/* No actions for now but it makes sense to keep the DOM structure */}\n              </div>\n\n              <div className=\"lb-ai-composer-actions\">\n                <AiComposerAction overrides={overrides} />\n              </div>\n            </div>\n          </div>\n        </AiComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":["AiComposerPrimitive.Abort","AiComposerPrimitive.Submit","AiComposerPrimitive.Form","AiComposerPrimitive.Editor"],"mappings":"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"}

package/dist/components/internal/Avatar.cjs

@@ -24,24 +24,21 @@ function AvatarLayout({
     () => !isLoading && fallback && !name ? getInitials.getInitials(fallback) : void 0,
     [isLoading, fallback, name]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn.cn("lb-avatar", className),
       "data-loading": isLoading ? "" : void 0,
       ...props,
-      children: [
-        src && /* @__PURE__ */ jsxRuntime.jsx("img", { className: "lb-avatar-image", src, alt: name }),
-        nameInitials ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-avatar-fallback", "aria-hidden": true, children: nameInitials }) : fallbackInitials ? /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "lb-avatar-fallback",
-            "aria-label": fallback,
-            title: fallback,
-            children: fallbackInitials
-          }
-        ) : null
-      ]
+      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: "lb-avatar-image", src, alt: name }) : nameInitials ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-avatar-fallback", "aria-hidden": true, children: nameInitials }) : fallbackInitials ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "lb-avatar-fallback",
+          "aria-label": fallback,
+          title: fallback,
+          children: fallbackInitials
+        }
+      ) : null
     }
   );
 }

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 type { Relax } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { getInitials } from \"../../utils/get-initials\";\nimport { useUserOrGroupInfo } from \"../../utils/use-user-or-group-info\";\n\ninterface AvatarLayoutProps extends ComponentProps<\"div\"> {\n  src?: string;\n  name?: string;\n  fallback?: string;\n  isLoading: boolean;\n}\n\nexport type AvatarProps = ComponentProps<\"div\"> & {\n  icon?: ReactNode;\n} & Relax<\n    | {\n        /**\n         * The user ID to display the avatar for.\n         */\n        userId: string;\n      }\n    | {\n        /**\n         * The group ID to display the avatar for.\n         */\n        groupId: string;\n      }\n  >;\n\nfunction AvatarLayout({\n  src,\n  name,\n  fallback,\n  isLoading,\n  className,\n  ...props\n}: AvatarLayoutProps) {\n  const nameInitials = useMemo(\n    () => (name ? getInitials(name) : undefined),\n    [name]\n  );\n  const fallbackInitials = useMemo(\n    () => (!isLoading && fallback && !name ? getInitials(fallback) : undefined),\n    [isLoading, fallback, name]\n  );\n\n  return (\n    <div\n      className={cn(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {src && <img className=\"lb-avatar-image\" src={src} alt={name} />}\n      {nameInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {nameInitials}\n        </span>\n      ) : fallbackInitials ? (\n        <span\n          className=\"lb-avatar-fallback\"\n          aria-label={fallback}\n          title={fallback}\n        >\n          {fallbackInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nexport function Avatar({ userId, groupId, icon, ...props }: AvatarProps) {\n  const { info, isLoading } = useUserOrGroupInfo(\n    userId ? \"user\" : \"group\",\n    userId ?? groupId\n  );\n\n  return icon && (isLoading || !info?.avatar) ? (\n    <div {...props}>{icon}</div>\n  ) : (\n    <AvatarLayout\n      src={info?.avatar}\n      name={info?.name}\n      fallback={userId ?? groupId}\n      isLoading={isLoading}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAkCA;AAAsB;AACpB;AACA;AACA;AACA;AACA;AAEF;AACE;AAAqB;AACe;AAC7B;AAEP;AAAyB;AAC0C;AACvC;AAG5B;AACE;AAAC;AAAA;AACqC;AACL;AAC3B;AAEH;AAA6D;AAM5D;AAAC;AAAA;AACW;AACE;AACL;AAEN;AAAA;AAED;AAAA;AAAA;AAGV;AAEO;AACL;AAA4B;AACR;AACR;AAGZ;AAGE;AAAC;AAAA;AACY;AACC;AACQ;AACpB;AACI;AAAA;AAGV;;"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { getInitials } from \"../../utils/get-initials\";\nimport { useUserOrGroupInfo } from \"../../utils/use-user-or-group-info\";\n\ninterface AvatarLayoutProps extends ComponentProps<\"div\"> {\n  src?: string;\n  name?: string;\n  fallback?: string;\n  isLoading: boolean;\n}\n\nexport type AvatarProps = ComponentProps<\"div\"> & {\n  icon?: ReactNode;\n} & Relax<\n    | {\n        /**\n         * The user ID to display the avatar for.\n         */\n        userId: string;\n      }\n    | {\n        /**\n         * The group ID to display the avatar for.\n         */\n        groupId: string;\n      }\n  >;\n\nfunction AvatarLayout({\n  src,\n  name,\n  fallback,\n  isLoading,\n  className,\n  ...props\n}: AvatarLayoutProps) {\n  const nameInitials = useMemo(\n    () => (name ? getInitials(name) : undefined),\n    [name]\n  );\n  const fallbackInitials = useMemo(\n    () => (!isLoading && fallback && !name ? getInitials(fallback) : undefined),\n    [isLoading, fallback, name]\n  );\n\n  return (\n    <div\n      className={cn(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {src ? (\n        <img className=\"lb-avatar-image\" src={src} alt={name} />\n      ) : nameInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {nameInitials}\n        </span>\n      ) : fallbackInitials ? (\n        <span\n          className=\"lb-avatar-fallback\"\n          aria-label={fallback}\n          title={fallback}\n        >\n          {fallbackInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nexport function Avatar({ userId, groupId, icon, ...props }: AvatarProps) {\n  const { info, isLoading } = useUserOrGroupInfo(\n    userId ? \"user\" : \"group\",\n    userId ?? groupId\n  );\n\n  return icon && (isLoading || !info?.avatar) ? (\n    <div {...props}>{icon}</div>\n  ) : (\n    <AvatarLayout\n      src={info?.avatar}\n      name={info?.name}\n      fallback={userId ?? groupId}\n      isLoading={isLoading}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAkCA;AAAsB;AACpB;AACA;AACA;AACA;AACA;AAEF;AACE;AAAqB;AACe;AAC7B;AAEP;AAAyB;AAC0C;AACvC;AAG5B;AACE;AAAC;AAAA;AACqC;AACL;AAC3B;AASF;AAAC;AAAA;AACW;AACE;AACL;AAEN;AAAA;AAED;AAAA;AAGV;AAEO;AACL;AAA4B;AACR;AACR;AAGZ;AAGE;AAAC;AAAA;AACY;AACC;AACQ;AACpB;AACI;AAAA;AAGV;;"}

package/dist/components/internal/Avatar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { cn } from '../../utils/cn.js';
 import { getInitials } from '../../utils/get-initials.js';
@@ -22,24 +22,21 @@ function AvatarLayout({
     () => !isLoading && fallback && !name ? getInitials(fallback) : void 0,
     [isLoading, fallback, name]
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn("lb-avatar", className),
       "data-loading": isLoading ? "" : void 0,
       ...props,
-      children: [
-        src && /* @__PURE__ */ jsx("img", { className: "lb-avatar-image", src, alt: name }),
-        nameInitials ? /* @__PURE__ */ jsx("span", { className: "lb-avatar-fallback", "aria-hidden": true, children: nameInitials }) : fallbackInitials ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "lb-avatar-fallback",
-            "aria-label": fallback,
-            title: fallback,
-            children: fallbackInitials
-          }
-        ) : null
-      ]
+      children: src ? /* @__PURE__ */ jsx("img", { className: "lb-avatar-image", src, alt: name }) : nameInitials ? /* @__PURE__ */ jsx("span", { className: "lb-avatar-fallback", "aria-hidden": true, children: nameInitials }) : fallbackInitials ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "lb-avatar-fallback",
+          "aria-label": fallback,
+          title: fallback,
+          children: fallbackInitials
+        }
+      ) : null
     }
   );
 }

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 type { Relax } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { getInitials } from \"../../utils/get-initials\";\nimport { useUserOrGroupInfo } from \"../../utils/use-user-or-group-info\";\n\ninterface AvatarLayoutProps extends ComponentProps<\"div\"> {\n  src?: string;\n  name?: string;\n  fallback?: string;\n  isLoading: boolean;\n}\n\nexport type AvatarProps = ComponentProps<\"div\"> & {\n  icon?: ReactNode;\n} & Relax<\n    | {\n        /**\n         * The user ID to display the avatar for.\n         */\n        userId: string;\n      }\n    | {\n        /**\n         * The group ID to display the avatar for.\n         */\n        groupId: string;\n      }\n  >;\n\nfunction AvatarLayout({\n  src,\n  name,\n  fallback,\n  isLoading,\n  className,\n  ...props\n}: AvatarLayoutProps) {\n  const nameInitials = useMemo(\n    () => (name ? getInitials(name) : undefined),\n    [name]\n  );\n  const fallbackInitials = useMemo(\n    () => (!isLoading && fallback && !name ? getInitials(fallback) : undefined),\n    [isLoading, fallback, name]\n  );\n\n  return (\n    <div\n      className={cn(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {src && <img className=\"lb-avatar-image\" src={src} alt={name} />}\n      {nameInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {nameInitials}\n        </span>\n      ) : fallbackInitials ? (\n        <span\n          className=\"lb-avatar-fallback\"\n          aria-label={fallback}\n          title={fallback}\n        >\n          {fallbackInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nexport function Avatar({ userId, groupId, icon, ...props }: AvatarProps) {\n  const { info, isLoading } = useUserOrGroupInfo(\n    userId ? \"user\" : \"group\",\n    userId ?? groupId\n  );\n\n  return icon && (isLoading || !info?.avatar) ? (\n    <div {...props}>{icon}</div>\n  ) : (\n    <AvatarLayout\n      src={info?.avatar}\n      name={info?.name}\n      fallback={userId ?? groupId}\n      isLoading={isLoading}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAkCA;AAAsB;AACpB;AACA;AACA;AACA;AACA;AAEF;AACE;AAAqB;AACe;AAC7B;AAEP;AAAyB;AAC0C;AACvC;AAG5B;AACE;AAAC;AAAA;AACqC;AACL;AAC3B;AAEH;AAA6D;AAM5D;AAAC;AAAA;AACW;AACE;AACL;AAEN;AAAA;AAED;AAAA;AAAA;AAGV;AAEO;AACL;AAA4B;AACR;AACR;AAGZ;AAGE;AAAC;AAAA;AACY;AACC;AACQ;AACpB;AACI;AAAA;AAGV;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { getInitials } from \"../../utils/get-initials\";\nimport { useUserOrGroupInfo } from \"../../utils/use-user-or-group-info\";\n\ninterface AvatarLayoutProps extends ComponentProps<\"div\"> {\n  src?: string;\n  name?: string;\n  fallback?: string;\n  isLoading: boolean;\n}\n\nexport type AvatarProps = ComponentProps<\"div\"> & {\n  icon?: ReactNode;\n} & Relax<\n    | {\n        /**\n         * The user ID to display the avatar for.\n         */\n        userId: string;\n      }\n    | {\n        /**\n         * The group ID to display the avatar for.\n         */\n        groupId: string;\n      }\n  >;\n\nfunction AvatarLayout({\n  src,\n  name,\n  fallback,\n  isLoading,\n  className,\n  ...props\n}: AvatarLayoutProps) {\n  const nameInitials = useMemo(\n    () => (name ? getInitials(name) : undefined),\n    [name]\n  );\n  const fallbackInitials = useMemo(\n    () => (!isLoading && fallback && !name ? getInitials(fallback) : undefined),\n    [isLoading, fallback, name]\n  );\n\n  return (\n    <div\n      className={cn(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {src ? (\n        <img className=\"lb-avatar-image\" src={src} alt={name} />\n      ) : nameInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {nameInitials}\n        </span>\n      ) : fallbackInitials ? (\n        <span\n          className=\"lb-avatar-fallback\"\n          aria-label={fallback}\n          title={fallback}\n        >\n          {fallbackInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nexport function Avatar({ userId, groupId, icon, ...props }: AvatarProps) {\n  const { info, isLoading } = useUserOrGroupInfo(\n    userId ? \"user\" : \"group\",\n    userId ?? groupId\n  );\n\n  return icon && (isLoading || !info?.avatar) ? (\n    <div {...props}>{icon}</div>\n  ) : (\n    <AvatarLayout\n      src={info?.avatar}\n      name={info?.name}\n      fallback={userId ?? groupId}\n      isLoading={isLoading}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAkCA;AAAsB;AACpB;AACA;AACA;AACA;AACA;AAEF;AACE;AAAqB;AACe;AAC7B;AAEP;AAAyB;AAC0C;AACvC;AAG5B;AACE;AAAC;AAAA;AACqC;AACL;AAC3B;AASF;AAAC;AAAA;AACW;AACE;AACL;AAEN;AAAA;AAED;AAAA;AAGV;AAEO;AACL;AAA4B;AACR;AACR;AAGZ;AAGE;AAAC;AAAA;AACY;AACC;AACQ;AACpB;AACI;AAAA;AAGV;;"}

package/dist/components/internal/CodeBlock.cjs

@@ -6,7 +6,6 @@ require('../../icons/index.cjs');
 var overrides = require('../../overrides.cjs');
 var Button = require('./Button.cjs');
 var Tooltip = require('./Tooltip.cjs');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var Check = require('../../icons/Check.cjs');
 var Copy = require('../../icons/Copy.cjs');
 
@@ -35,7 +34,7 @@ function CodeBlock({ title, code, overrides: overrides$1 }) {
       console.error(error);
     }
   }, [code]);
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-root lb-code-block", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-root lb-code-block", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-code-block-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-code-block-title", children: title }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-code-block-header-actions", children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: isCopied ? null : $.COPY_TO_CLIPBOARD, children: /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.cjs","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  title: string;\n  code: string;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n  const $ = useOverrides(overrides);\n  const [isCopied, setCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (isCopied) {\n      timeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, COPY_DELAY);\n    }\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [isCopied]);\n\n  const handleCopy = useCallback(() => {\n    try {\n      navigator.clipboard.writeText(code);\n      setCopied(true);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [code]);\n\n  return (\n    <TooltipProvider>\n      <div className=\"lb-root lb-code-block\">\n        <div className=\"lb-code-block-header\">\n          <span className=\"lb-code-block-title\">{title}</span>\n          <div className=\"lb-code-block-header-actions\">\n            <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n              <Button\n                className=\"lb-code-block-header-action\"\n                icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n                onClick={handleCopy}\n                aria-label={$.COPY_TO_CLIPBOARD}\n              />\n            </Tooltip>\n          </div>\n        </div>\n        <pre className=\"lb-code-block-content\">\n          <code>{code}</code>\n        </pre>\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"names":["overrides","useOverrides","useState","useRef","useEffect","useCallback","jsx","TooltipProvider","jsxs","Tooltip","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;;;;;;;AASA,MAAM,UAAa,GAAA,IAAA,CAAA;AAQZ,SAAS,SAAU,CAAA,EAAE,KAAO,EAAA,IAAA,aAAMA,aAA6B,EAAA;AACpE,EAAM,MAAA,CAAA,GAAIC,uBAAaD,WAAS,CAAA,CAAA;AAChC,EAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAIE,eAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAaC,aAA6C,IAAI,CAAA,CAAA;AAEpE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACd,UAAU,CAAA,CAAA;AAAA,KACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,UAAA,GAAaC,kBAAY,MAAM;AACnC,IAAI,IAAA;AACF,MAAU,SAAA,CAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,aACP,KAAO,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBACGC,cAAA,CAAAC,gCAAA,EAAA,EACC,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,uBACb,EAAA,QAAA,EAAA;AAAA,oBAACA,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,sBACb,EAAA,QAAA,EAAA;AAAA,sBAACF,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,qBAAA,EAAuB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAC7CA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,8BACb,EAAA,QAAA,kBAAAA,cAAA,CAACG,mBAAQ,OAAS,EAAA,QAAA,GAAW,IAAO,GAAA,CAAA,CAAE,iBACpC,EAAA,QAAA,kBAAAH,cAAA;AAAA,QAACI,aAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,6BAAA;AAAA,UACV,MAAM,QAAW,mBAAAJ,cAAA,CAACK,eAAU,EAAA,EAAA,CAAA,kCAAMC,aAAS,EAAA,EAAA,CAAA;AAAA,UAC3C,OAAS,EAAA,UAAA;AAAA,UACT,cAAY,CAAE,CAAA,iBAAA;AAAA,SAAA;AAAA,SAElB,CACF,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,mCACC,KAAI,EAAA,EAAA,SAAA,EAAU,yBACb,QAAC,kBAAAN,cAAA,CAAA,MAAA,EAAA,EAAM,gBAAK,CACd,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CodeBlock.cjs","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  title: string;\n  code: string;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n  const $ = useOverrides(overrides);\n  const [isCopied, setCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (isCopied) {\n      timeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, COPY_DELAY);\n    }\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [isCopied]);\n\n  const handleCopy = useCallback(() => {\n    try {\n      navigator.clipboard.writeText(code);\n      setCopied(true);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [code]);\n\n  return (\n    <TooltipProvider>\n      <div className=\"lb-root lb-code-block\">\n        <div className=\"lb-code-block-header\">\n          <span className=\"lb-code-block-title\">{title}</span>\n          <div className=\"lb-code-block-header-actions\">\n            <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n              <Button\n                className=\"lb-code-block-header-action\"\n                icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n                onClick={handleCopy}\n                aria-label={$.COPY_TO_CLIPBOARD}\n              />\n            </Tooltip>\n          </div>\n        </div>\n        <pre className=\"lb-code-block-content\">\n          <code>{code}</code>\n        </pre>\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"names":["overrides","useOverrides","useState","useRef","useEffect","useCallback","jsx","TooltipProvider","jsxs","Tooltip","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;;;;;;AASA,MAAM,UAAa,GAAA,IAAA,CAAA;AAQZ,SAAS,SAAU,CAAA,EAAE,KAAO,EAAA,IAAA,aAAMA,aAA6B,EAAA;AACpE,EAAM,MAAA,CAAA,GAAIC,uBAAaD,WAAS,CAAA,CAAA;AAChC,EAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAIE,eAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAaC,aAA6C,IAAI,CAAA,CAAA;AAEpE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACd,UAAU,CAAA,CAAA;AAAA,KACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,UAAA,GAAaC,kBAAY,MAAM;AACnC,IAAI,IAAA;AACF,MAAU,SAAA,CAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,aACP,KAAO,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBACGC,cAAA,CAAAC,uBAAA,EAAA,EACC,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,uBACb,EAAA,QAAA,EAAA;AAAA,oBAACA,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,sBACb,EAAA,QAAA,EAAA;AAAA,sBAACF,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,qBAAA,EAAuB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAC7CA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,8BACb,EAAA,QAAA,kBAAAA,cAAA,CAACG,mBAAQ,OAAS,EAAA,QAAA,GAAW,IAAO,GAAA,CAAA,CAAE,iBACpC,EAAA,QAAA,kBAAAH,cAAA;AAAA,QAACI,aAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,6BAAA;AAAA,UACV,MAAM,QAAW,mBAAAJ,cAAA,CAACK,eAAU,EAAA,EAAA,CAAA,kCAAMC,aAAS,EAAA,EAAA,CAAA;AAAA,UAC3C,OAAS,EAAA,UAAA;AAAA,UACT,cAAY,CAAE,CAAA,iBAAA;AAAA,SAAA;AAAA,SAElB,CACF,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,mCACC,KAAI,EAAA,EAAA,SAAA,EAAU,yBACb,QAAC,kBAAAN,cAAA,CAAA,MAAA,EAAA,EAAM,gBAAK,CACd,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/internal/CodeBlock.js

@@ -3,8 +3,7 @@ import { useState, useRef, useEffect, useCallback } from 'react';
 import '../../icons/index.js';
 import { useOverrides } from '../../overrides.js';
 import { Button } from './Button.js';
-import { Tooltip } from './Tooltip.js';
-import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { TooltipProvider, Tooltip } from './Tooltip.js';
 import { CheckIcon } from '../../icons/Check.js';
 import { CopyIcon } from '../../icons/Copy.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  title: string;\n  code: string;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n  const $ = useOverrides(overrides);\n  const [isCopied, setCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (isCopied) {\n      timeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, COPY_DELAY);\n    }\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [isCopied]);\n\n  const handleCopy = useCallback(() => {\n    try {\n      navigator.clipboard.writeText(code);\n      setCopied(true);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [code]);\n\n  return (\n    <TooltipProvider>\n      <div className=\"lb-root lb-code-block\">\n        <div className=\"lb-code-block-header\">\n          <span className=\"lb-code-block-title\">{title}</span>\n          <div className=\"lb-code-block-header-actions\">\n            <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n              <Button\n                className=\"lb-code-block-header-action\"\n                icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n                onClick={handleCopy}\n                aria-label={$.COPY_TO_CLIPBOARD}\n              />\n            </Tooltip>\n          </div>\n        </div>\n        <pre className=\"lb-code-block-content\">\n          <code>{code}</code>\n        </pre>\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AASA,MAAM,UAAa,GAAA,IAAA,CAAA;AAQZ,SAAS,SAAU,CAAA,EAAE,KAAO,EAAA,IAAA,EAAM,WAA6B,EAAA;AACpE,EAAM,MAAA,CAAA,GAAI,aAAa,SAAS,CAAA,CAAA;AAChC,EAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAa,OAA6C,IAAI,CAAA,CAAA;AAEpE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACd,UAAU,CAAA,CAAA;AAAA,KACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,IAAI,IAAA;AACF,MAAU,SAAA,CAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,aACP,KAAO,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBACG,GAAA,CAAA,eAAA,EAAA,EACC,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,uBACb,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,sBACb,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,qBAAA,EAAuB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAC7C,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,8BACb,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,OAAS,EAAA,QAAA,GAAW,IAAO,GAAA,CAAA,CAAE,iBACpC,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,6BAAA;AAAA,UACV,MAAM,QAAW,mBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA,uBAAM,QAAS,EAAA,EAAA,CAAA;AAAA,UAC3C,OAAS,EAAA,UAAA;AAAA,UACT,cAAY,CAAE,CAAA,iBAAA;AAAA,SAAA;AAAA,SAElB,CACF,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,wBACC,KAAI,EAAA,EAAA,SAAA,EAAU,yBACb,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAM,gBAAK,CACd,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  title: string;\n  code: string;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n  const $ = useOverrides(overrides);\n  const [isCopied, setCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (isCopied) {\n      timeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, COPY_DELAY);\n    }\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [isCopied]);\n\n  const handleCopy = useCallback(() => {\n    try {\n      navigator.clipboard.writeText(code);\n      setCopied(true);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [code]);\n\n  return (\n    <TooltipProvider>\n      <div className=\"lb-root lb-code-block\">\n        <div className=\"lb-code-block-header\">\n          <span className=\"lb-code-block-title\">{title}</span>\n          <div className=\"lb-code-block-header-actions\">\n            <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n              <Button\n                className=\"lb-code-block-header-action\"\n                icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n                onClick={handleCopy}\n                aria-label={$.COPY_TO_CLIPBOARD}\n              />\n            </Tooltip>\n          </div>\n        </div>\n        <pre className=\"lb-code-block-content\">\n          <code>{code}</code>\n        </pre>\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AASA,MAAM,UAAa,GAAA,IAAA,CAAA;AAQZ,SAAS,SAAU,CAAA,EAAE,KAAO,EAAA,IAAA,EAAM,WAA6B,EAAA;AACpE,EAAM,MAAA,CAAA,GAAI,aAAa,SAAS,CAAA,CAAA;AAChC,EAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAa,OAA6C,IAAI,CAAA,CAAA;AAEpE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACd,UAAU,CAAA,CAAA;AAAA,KACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,IAAI,IAAA;AACF,MAAU,SAAA,CAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,aACP,KAAO,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBACG,GAAA,CAAA,eAAA,EAAA,EACC,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,uBACb,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,sBACb,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,qBAAA,EAAuB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAC7C,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,8BACb,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,OAAS,EAAA,QAAA,GAAW,IAAO,GAAA,CAAA,CAAE,iBACpC,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,6BAAA;AAAA,UACV,MAAM,QAAW,mBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA,uBAAM,QAAS,EAAA,EAAA,CAAA;AAAA,UAC3C,OAAS,EAAA,UAAA;AAAA,UACT,cAAY,CAAE,CAAA,iBAAA;AAAA,SAAA;AAAA,SAElB,CACF,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,wBACC,KAAI,EAAA,EAAA,SAAA,EAAU,yBACb,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAM,gBAAK,CACd,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/internal/Dropdown.cjs

@@ -2,32 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var radixUi = require('radix-ui');
 var react = require('react');
 var config = require('../../config.cjs');
 var constants = require('../../constants.cjs');
 var overrides = require('../../overrides.cjs');
 var cn = require('../../utils/cn.cjs');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
-
 
 function Dropdown({
   children,
@@ -41,7 +22,7 @@ function Dropdown({
   const $ = overrides.useOverrides();
   const { portalContainer } = config.useLiveblocksUiConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenuPrimitive__namespace.Root,
+    radixUi.DropdownMenu.Root,
     {
       defaultOpen,
       open,
@@ -49,8 +30,8 @@ function Dropdown({
       dir: $.dir,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownMenuPrimitive__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          radixUi.DropdownMenu.Content,
           {
             className: cn.cn(
               "lb-root lb-portal lb-elevation lb-dropdown",
@@ -58,6 +39,7 @@ function Dropdown({
             ),
             sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
             collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+            updatePositionStrategy: "always",
             ...props,
             children: content
           }
@@ -69,7 +51,7 @@ function Dropdown({
 const DropdownItem = react.forwardRef(
   ({ children, className, icon, ...props }, forwardedRef) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownMenuPrimitive__namespace.DropdownMenuItem,
+      radixUi.DropdownMenu.DropdownMenuItem,
       {
         className: cn.cn("lb-dropdown-item", className),
         ...props,
@@ -82,11 +64,9 @@ const DropdownItem = react.forwardRef(
     );
   }
 );
+const DropdownTrigger = radixUi.DropdownMenu.Trigger;
 
-Object.defineProperty(exports, 'DropdownTrigger', {
-  enumerable: true,
-  get: function () { return DropdownMenuPrimitive.DropdownMenuTrigger; }
-});
 exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem;
+exports.DropdownTrigger = DropdownTrigger;
 //# sourceMappingURL=Dropdown.cjs.map

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 { cn } from \"../../utils/cn\";\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={cn(\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={cn(\"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;AACE;AAAuB;AAAtB;AACC;AACA;AACA;AACO;AAEN;AAAA;AAEC;AAAuB;AAAtB;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AAAA;AAEL;AAAA;AAAA;AAGN;AAEO;AAAqB;AAExB;AACE;AAAuB;AAAtB;AAC4C;AACvC;AACC;AAEJ;AAIG;AAGA;AAAA;AAAA;AACN;AAGN;;;;;;;"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\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 { cn } from \"../../utils/cn\";\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={cn(\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          updatePositionStrategy=\"always\"\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={cn(\"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 const DropdownTrigger = DropdownMenuPrimitive.Trigger;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAAuB;AAAtB;AACC;AACA;AACA;AACO;AAEN;AAAA;AAEC;AAAuB;AAAtB;AACY;AACT;AACA;AACF;AACY;AACM;AACK;AACnB;AAEH;AAAA;AAEL;AAAA;AAAA;AAGN;AAEO;AAAqB;AAExB;AACE;AAAuB;AAAtB;AAC4C;AACvC;AACC;AAEJ;AAIG;AAGA;AAAA;AAAA;AACN;AAGN;AAEO;;;;"}

package/dist/components/internal/Dropdown.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-export { DropdownMenuTrigger as DropdownTrigger } from '@radix-ui/react-dropdown-menu';
+import { DropdownMenu } from 'radix-ui';
 import { forwardRef } from 'react';
 import { useLiveblocksUiConfig } from '../../config.js';
 import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.js';
@@ -21,7 +20,7 @@ function Dropdown({
   const $ = useOverrides();
   const { portalContainer } = useLiveblocksUiConfig();
   return /* @__PURE__ */ jsxs(
-    DropdownMenuPrimitive.Root,
+    DropdownMenu.Root,
     {
       defaultOpen,
       open,
@@ -29,8 +28,8 @@ function Dropdown({
       dir: $.dir,
       children: [
         children,
-        /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          DropdownMenuPrimitive.Content,
+        /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          DropdownMenu.Content,
           {
             className: cn(
               "lb-root lb-portal lb-elevation lb-dropdown",
@@ -38,6 +37,7 @@ function Dropdown({
             ),
             sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
             collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+            updatePositionStrategy: "always",
             ...props,
             children: content
           }
@@ -49,7 +49,7 @@ function Dropdown({
 const DropdownItem = forwardRef(
   ({ children, className, icon, ...props }, forwardedRef) => {
     return /* @__PURE__ */ jsxs(
-      DropdownMenuPrimitive.DropdownMenuItem,
+      DropdownMenu.DropdownMenuItem,
       {
         className: cn("lb-dropdown-item", className),
         ...props,
@@ -62,6 +62,7 @@ const DropdownItem = forwardRef(
     );
   }
 );
+const DropdownTrigger = DropdownMenu.Trigger;
 
-export { Dropdown, DropdownItem };
+export { Dropdown, DropdownItem, DropdownTrigger };
 //# sourceMappingURL=Dropdown.js.map