@liveblocks/react-ui 2.12.0-rc1 → 2.12.1-test1

package/dist/components/Composer.js

@@ -4,6 +4,7 @@
 var core = require('@liveblocks/core');
 var react = require('@liveblocks/react');
 var React = require('react');
+var config = require('../config.js');
 var Attachment = require('../icons/Attachment.js');
 var Emoji = require('../icons/Emoji.js');
 var Mention = require('../icons/Mention.js');
@@ -298,6 +299,7 @@ const Composer = React.forwardRef(
     const createThread = react.useCreateThread();
     const createComment = react.useCreateComment();
     const editComment = react.useEditComment();
+    const { preventUnsavedComposerChanges } = config.useLiveblocksUIConfig();
     const hasResolveMentionSuggestions = client[core.kInternal].resolveMentionSuggestions !== void 0;
     const isEmptyRef = React.useRef(true);
     const isEmojiPickerOpenRef = React.useRef(false);
@@ -400,7 +402,8 @@ const Composer = React.forwardRef(
       onBlur: handleBlur,
       disabled,
       defaultAttachments,
-      pasteFilesAsAttachments: showAttachments
+      pasteFilesAsAttachments: showAttachments,
+      preventUnsavedChanges: preventUnsavedComposerChanges
     }, /* @__PURE__ */ React.createElement(ComposerEditorContainer, {
       defaultValue,
       actions,

package/dist/components/Composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.js","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useLayoutEffect } from \"../utils/use-layout-effect\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\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 (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onMouseDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\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 (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={editorComponents}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onMouseDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showAttribution,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const client = useClient();\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsMA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAyB;AAKpC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AACiB;AAChB;AACA;AACF;AAMZ;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAAiC;AACb;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AAEA;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAC/C;AACW;AACD;AACM;AACf;AACA;AACY;AACZ;AACO;AAEY;AAAoB;AAEtC;AAAc;AACZ;AAAc;AAEV;AACU;AACT;AAGH;AACU;AACW;AACpB;AAGC;AACU;AACT;AAKL;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACc;AACJ;AACC;AACF;AACM;AAY3B;AAAc;AACZ;AAAc;AAQzB;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AAClB;AACG;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AACkB;AAGpB;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACR;AACA;AACyB;AAExB;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAGN;AAGN;;"}
+{"version":3,"file":"Composer.js","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useLayoutEffect } from \"../utils/use-layout-effect\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\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 (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onMouseDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\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 (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={editorComponents}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onMouseDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showAttribution,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const client = useClient();\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuMA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAyB;AAKpC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AACiB;AAChB;AACA;AACF;AAMZ;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAAiC;AACb;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AAEA;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAC/C;AACW;AACD;AACM;AACf;AACA;AACY;AACZ;AACO;AAEY;AAAoB;AAEtC;AAAc;AACZ;AAAc;AAEV;AACU;AACT;AAGH;AACU;AACW;AACpB;AAGC;AACU;AACT;AAKL;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACc;AACJ;AACC;AACF;AACM;AAY3B;AAAc;AACZ;AAAc;AAQzB;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AAClB;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AACkB;AAGpB;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACR;AACA;AACyB;AACF;AAEtB;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAGN;AAGN;;"}

package/dist/components/Composer.mjs

@@ -2,6 +2,7 @@
 import { kInternal } from '@liveblocks/core';
 import { useClient, useCreateThread, useCreateComment, useEditComment } from '@liveblocks/react';
 import React__default, { forwardRef, useRef, useCallback } from 'react';
+import { useLiveblocksUIConfig } from '../config.mjs';
 import { AttachmentIcon } from '../icons/Attachment.mjs';
 import { EmojiIcon } from '../icons/Emoji.mjs';
 import { MentionIcon } from '../icons/Mention.mjs';
@@ -296,6 +297,7 @@ const Composer = forwardRef(
     const createThread = useCreateThread();
     const createComment = useCreateComment();
     const editComment = useEditComment();
+    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();
     const hasResolveMentionSuggestions = client[kInternal].resolveMentionSuggestions !== void 0;
     const isEmptyRef = useRef(true);
     const isEmojiPickerOpenRef = useRef(false);
@@ -398,7 +400,8 @@ const Composer = forwardRef(
       onBlur: handleBlur,
       disabled,
       defaultAttachments,
-      pasteFilesAsAttachments: showAttachments
+      pasteFilesAsAttachments: showAttachments,
+      preventUnsavedChanges: preventUnsavedComposerChanges
     }, /* @__PURE__ */ React__default.createElement(ComposerEditorContainer, {
       defaultValue,
       actions,

package/dist/components/Composer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.mjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useLayoutEffect } from \"../utils/use-layout-effect\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\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 (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onMouseDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\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 (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={editorComponents}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onMouseDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showAttribution,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const client = useClient();\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsMA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAyB;AAKpC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AACiB;AAChB;AACA;AACF;AAMZ;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAAiC;AACb;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AAEA;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAC/C;AACW;AACD;AACM;AACf;AACA;AACY;AACZ;AACO;AAEY;AAAoB;AAEtC;AAAc;AACZ;AAAc;AAEV;AACU;AACT;AAGH;AACU;AACW;AACpB;AAGC;AACU;AACT;AAKL;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACc;AACJ;AACC;AACF;AACM;AAY3B;AAAc;AACZ;AAAc;AAQzB;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AAClB;AACG;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AACkB;AAGpB;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACR;AACA;AACyB;AAExB;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAGN;AAGN;;"}
+{"version":3,"file":"Composer.mjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useLayoutEffect } from \"../utils/use-layout-effect\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\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 (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onMouseDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\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 (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={editorComponents}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onMouseDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showAttribution,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const client = useClient();\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuMA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAyB;AAKpC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AACiB;AAChB;AACA;AACF;AAMZ;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAAiC;AACb;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AAEA;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAC/C;AACW;AACD;AACM;AACf;AACA;AACY;AACZ;AACO;AAEY;AAAoB;AAEtC;AAAc;AACZ;AAAc;AAEV;AACU;AACT;AAGH;AACU;AACW;AACpB;AAGC;AACU;AACT;AAKL;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACc;AACJ;AACC;AACF;AACM;AAY3B;AAAc;AACZ;AAAc;AAQzB;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AAClB;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AACkB;AAGpB;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACR;AACA;AACyB;AACF;AAEtB;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAGN;AAGN;;"}

package/dist/config.js

@@ -13,11 +13,12 @@ function LiveblocksUIConfig({
   overrides: overrides$1,
   components: components$1,
   portalContainer,
+  preventUnsavedComposerChanges = true,
   children
 }) {
   const liveblocksUIConfig = React.useMemo(
-    () => ({ portalContainer }),
-    [portalContainer]
+    () => ({ portalContainer, preventUnsavedComposerChanges }),
+    [portalContainer, preventUnsavedComposerChanges]
   );
   return /* @__PURE__ */ React.createElement(LiveblocksUIConfigContext.Provider, {
     value: liveblocksUIConfig

package/dist/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../src/config.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport React, { createContext, useContext, useMemo } from \"react\";\n\nimport { type Components, ComponentsProvider } from \"./components\";\nimport type { Overrides } from \"./overrides\";\nimport { OverridesProvider } from \"./overrides\";\n\ntype LiveblocksUIConfigProps = PropsWithChildren<{\n  /**\n   * Override the components' strings.\n   */\n  overrides?: Partial<Overrides>;\n\n  /**\n   * Override the components' components.\n   */\n  components?: Partial<Components>;\n\n  /**\n   * The container to render the portal into.\n   */\n  portalContainer?: HTMLElement;\n}>;\n\ninterface LiveblocksUIConfigContext {\n  portalContainer?: HTMLElement;\n}\n\nconst LiveblocksUIConfigContext = createContext<LiveblocksUIConfigContext>({});\n\nexport function useLiveblocksUIConfig() {\n  return useContext(LiveblocksUIConfigContext);\n}\n\n/**\n * Set configuration options for all components.\n *\n * @example\n * <LiveblocksUIConfig overrides={{ locale: \"fr\", USER_UNKNOWN: \"Anonyme\", ... }}>\n *   <App />\n * </LiveblocksUIConfig>\n */\nexport function LiveblocksUIConfig({\n  overrides,\n  components,\n  portalContainer,\n  children,\n}: LiveblocksUIConfigProps) {\n  const liveblocksUIConfig = useMemo(\n    () => ({ portalContainer }),\n    [portalContainer]\n  );\n\n  return (\n    <LiveblocksUIConfigContext.Provider value={liveblocksUIConfig}>\n      <OverridesProvider overrides={overrides}>\n        <ComponentsProvider components={components}>\n          {children}\n        </ComponentsProvider>\n      </OverridesProvider>\n    </LiveblocksUIConfigContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA8BA;AAEO;AACL;AACF;AAUO;AAA4B;AACjC;AACA;AACA;AAEF;AACE;AAA2B;AACA;AACT;AAGlB;AACG;AAA0C;AACxC;AAAkB;AAChB;AAAmB;AAM5B;;;"}
+{"version":3,"file":"config.js","sources":["../src/config.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport React, { createContext, useContext, useMemo } from \"react\";\n\nimport { type Components, ComponentsProvider } from \"./components\";\nimport type { Overrides } from \"./overrides\";\nimport { OverridesProvider } from \"./overrides\";\n\ntype LiveblocksUIConfigProps = PropsWithChildren<{\n  /**\n   * Override the components' strings.\n   */\n  overrides?: Partial<Overrides>;\n\n  /**\n   * Override the components' components.\n   */\n  components?: Partial<Components>;\n\n  /**\n   * The container to render the portal into.\n   */\n  portalContainer?: HTMLElement;\n\n  /**\n   * When `preventUnsavedChanges` is set on your Liveblocks client (or set on\n   * <LiveblocksProvider>), then closing a browser tab will be prevented when\n   * there are unsaved changes.\n   *\n   * By default, that will include draft texts or attachments that are (being)\n   * uploaded via comments/threads composers, but not submitted yet.\n   *\n   * If you want to prevent unsaved changes with Liveblocks, but not for\n   * composers, you can opt-out by setting this option to `false`.\n   */\n  preventUnsavedComposerChanges?: boolean;\n}>;\n\ninterface LiveblocksUIConfigContext {\n  portalContainer?: HTMLElement;\n  preventUnsavedComposerChanges?: boolean;\n}\n\nconst LiveblocksUIConfigContext = createContext<LiveblocksUIConfigContext>({});\n\nexport function useLiveblocksUIConfig() {\n  return useContext(LiveblocksUIConfigContext);\n}\n\n/**\n * Set configuration options for all components.\n *\n * @example\n * <LiveblocksUIConfig overrides={{ locale: \"fr\", USER_UNKNOWN: \"Anonyme\", ... }}>\n *   <App />\n * </LiveblocksUIConfig>\n */\nexport function LiveblocksUIConfig({\n  overrides,\n  components,\n  portalContainer,\n  preventUnsavedComposerChanges = true,\n  children,\n}: LiveblocksUIConfigProps) {\n  const liveblocksUIConfig = useMemo(\n    () => ({ portalContainer, preventUnsavedComposerChanges }),\n    [portalContainer, preventUnsavedComposerChanges]\n  );\n\n  return (\n    <LiveblocksUIConfigContext.Provider value={liveblocksUIConfig}>\n      <OverridesProvider overrides={overrides}>\n        <ComponentsProvider components={components}>\n          {children}\n        </ComponentsProvider>\n      </OverridesProvider>\n    </LiveblocksUIConfigContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA4CA;AAEO;AACL;AACF;AAUO;AAA4B;AACjC;AACA;AACA;AACgC;AAElC;AACE;AAA2B;AAC+B;AACT;AAGjD;AACG;AAA0C;AACxC;AAAkB;AAChB;AAAmB;AAM5B;;;"}

package/dist/config.mjs

@@ -11,11 +11,12 @@ function LiveblocksUIConfig({
   overrides,
   components,
   portalContainer,
+  preventUnsavedComposerChanges = true,
   children
 }) {
   const liveblocksUIConfig = useMemo(
-    () => ({ portalContainer }),
-    [portalContainer]
+    () => ({ portalContainer, preventUnsavedComposerChanges }),
+    [portalContainer, preventUnsavedComposerChanges]
   );
   return /* @__PURE__ */ React__default.createElement(LiveblocksUIConfigContext.Provider, {
     value: liveblocksUIConfig

package/dist/config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"config.mjs","sources":["../src/config.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport React, { createContext, useContext, useMemo } from \"react\";\n\nimport { type Components, ComponentsProvider } from \"./components\";\nimport type { Overrides } from \"./overrides\";\nimport { OverridesProvider } from \"./overrides\";\n\ntype LiveblocksUIConfigProps = PropsWithChildren<{\n  /**\n   * Override the components' strings.\n   */\n  overrides?: Partial<Overrides>;\n\n  /**\n   * Override the components' components.\n   */\n  components?: Partial<Components>;\n\n  /**\n   * The container to render the portal into.\n   */\n  portalContainer?: HTMLElement;\n}>;\n\ninterface LiveblocksUIConfigContext {\n  portalContainer?: HTMLElement;\n}\n\nconst LiveblocksUIConfigContext = createContext<LiveblocksUIConfigContext>({});\n\nexport function useLiveblocksUIConfig() {\n  return useContext(LiveblocksUIConfigContext);\n}\n\n/**\n * Set configuration options for all components.\n *\n * @example\n * <LiveblocksUIConfig overrides={{ locale: \"fr\", USER_UNKNOWN: \"Anonyme\", ... }}>\n *   <App />\n * </LiveblocksUIConfig>\n */\nexport function LiveblocksUIConfig({\n  overrides,\n  components,\n  portalContainer,\n  children,\n}: LiveblocksUIConfigProps) {\n  const liveblocksUIConfig = useMemo(\n    () => ({ portalContainer }),\n    [portalContainer]\n  );\n\n  return (\n    <LiveblocksUIConfigContext.Provider value={liveblocksUIConfig}>\n      <OverridesProvider overrides={overrides}>\n        <ComponentsProvider components={components}>\n          {children}\n        </ComponentsProvider>\n      </OverridesProvider>\n    </LiveblocksUIConfigContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;AA8BA;AAEO;AACL;AACF;AAUO;AAA4B;AACjC;AACA;AACA;AAEF;AACE;AAA2B;AACA;AACT;AAGlB;AACG;AAA0C;AACxC;AAAkB;AAChB;AAAmB;AAM5B;;"}
+{"version":3,"file":"config.mjs","sources":["../src/config.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport React, { createContext, useContext, useMemo } from \"react\";\n\nimport { type Components, ComponentsProvider } from \"./components\";\nimport type { Overrides } from \"./overrides\";\nimport { OverridesProvider } from \"./overrides\";\n\ntype LiveblocksUIConfigProps = PropsWithChildren<{\n  /**\n   * Override the components' strings.\n   */\n  overrides?: Partial<Overrides>;\n\n  /**\n   * Override the components' components.\n   */\n  components?: Partial<Components>;\n\n  /**\n   * The container to render the portal into.\n   */\n  portalContainer?: HTMLElement;\n\n  /**\n   * When `preventUnsavedChanges` is set on your Liveblocks client (or set on\n   * <LiveblocksProvider>), then closing a browser tab will be prevented when\n   * there are unsaved changes.\n   *\n   * By default, that will include draft texts or attachments that are (being)\n   * uploaded via comments/threads composers, but not submitted yet.\n   *\n   * If you want to prevent unsaved changes with Liveblocks, but not for\n   * composers, you can opt-out by setting this option to `false`.\n   */\n  preventUnsavedComposerChanges?: boolean;\n}>;\n\ninterface LiveblocksUIConfigContext {\n  portalContainer?: HTMLElement;\n  preventUnsavedComposerChanges?: boolean;\n}\n\nconst LiveblocksUIConfigContext = createContext<LiveblocksUIConfigContext>({});\n\nexport function useLiveblocksUIConfig() {\n  return useContext(LiveblocksUIConfigContext);\n}\n\n/**\n * Set configuration options for all components.\n *\n * @example\n * <LiveblocksUIConfig overrides={{ locale: \"fr\", USER_UNKNOWN: \"Anonyme\", ... }}>\n *   <App />\n * </LiveblocksUIConfig>\n */\nexport function LiveblocksUIConfig({\n  overrides,\n  components,\n  portalContainer,\n  preventUnsavedComposerChanges = true,\n  children,\n}: LiveblocksUIConfigProps) {\n  const liveblocksUIConfig = useMemo(\n    () => ({ portalContainer, preventUnsavedComposerChanges }),\n    [portalContainer, preventUnsavedComposerChanges]\n  );\n\n  return (\n    <LiveblocksUIConfigContext.Provider value={liveblocksUIConfig}>\n      <OverridesProvider overrides={overrides}>\n        <ComponentsProvider components={components}>\n          {children}\n        </ComponentsProvider>\n      </OverridesProvider>\n    </LiveblocksUIConfigContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;AA4CA;AAEO;AACL;AACF;AAUO;AAA4B;AACjC;AACA;AACA;AACgC;AAElC;AACE;AAA2B;AAC+B;AACT;AAGjD;AACG;AAA0C;AACxC;AAAkB;AAChB;AAAmB;AAM5B;;"}

package/dist/index.d.mts

@@ -610,6 +610,18 @@ declare type LiveblocksUIConfigProps = PropsWithChildren<{
      * The container to render the portal into.
      */
     portalContainer?: HTMLElement;
+    /**
+     * When `preventUnsavedChanges` is set on your Liveblocks client (or set on
+     * <LiveblocksProvider>), then closing a browser tab will be prevented when
+     * there are unsaved changes.
+     *
+     * By default, that will include draft texts or attachments that are (being)
+     * uploaded via comments/threads composers, but not submitted yet.
+     *
+     * If you want to prevent unsaved changes with Liveblocks, but not for
+     * composers, you can opt-out by setting this option to `false`.
+     */
+    preventUnsavedComposerChanges?: boolean;
 }>;
 /**
  * Set configuration options for all components.
@@ -619,7 +631,7 @@ declare type LiveblocksUIConfigProps = PropsWithChildren<{
  *   <App />
  * </LiveblocksUIConfig>
  */
-declare function LiveblocksUIConfig({ overrides, components, portalContainer, children, }: LiveblocksUIConfigProps): React.JSX.Element;
+declare function LiveblocksUIConfig({ overrides, components, portalContainer, preventUnsavedComposerChanges, children, }: LiveblocksUIConfigProps): React.JSX.Element;
 
 interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children" | "title"> {
     /**

package/dist/index.d.ts

@@ -610,6 +610,18 @@ declare type LiveblocksUIConfigProps = PropsWithChildren<{
      * The container to render the portal into.
      */
     portalContainer?: HTMLElement;
+    /**
+     * When `preventUnsavedChanges` is set on your Liveblocks client (or set on
+     * <LiveblocksProvider>), then closing a browser tab will be prevented when
+     * there are unsaved changes.
+     *
+     * By default, that will include draft texts or attachments that are (being)
+     * uploaded via comments/threads composers, but not submitted yet.
+     *
+     * If you want to prevent unsaved changes with Liveblocks, but not for
+     * composers, you can opt-out by setting this option to `false`.
+     */
+    preventUnsavedComposerChanges?: boolean;
 }>;
 /**
  * Set configuration options for all components.
@@ -619,7 +631,7 @@ declare type LiveblocksUIConfigProps = PropsWithChildren<{
  *   <App />
  * </LiveblocksUIConfig>
  */
-declare function LiveblocksUIConfig({ overrides, components, portalContainer, children, }: LiveblocksUIConfigProps): React.JSX.Element;
+declare function LiveblocksUIConfig({ overrides, components, portalContainer, preventUnsavedComposerChanges, children, }: LiveblocksUIConfigProps): React.JSX.Element;
 
 interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children" | "title"> {
     /**

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.12.0-rc1";
+const PKG_VERSION = "2.12.1-test1";
 const PKG_FORMAT = "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,aAAA;AACjD,MAAA,UAAA,GAAkD;;;;;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,eAAA;AACjD,MAAA,UAAA,GAAkD;;;;;;"}

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.12.0-rc1";
+const PKG_VERSION = "2.12.1-test1";
 const PKG_FORMAT = "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/dist/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,aAAA;AACjD,MAAA,UAAA,GAAkD;;;;"}
+{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,eAAA;AACjD,MAAA,UAAA,GAAkD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "2.12.0-rc1",
+  "version": "2.12.1-test1",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -75,9 +75,9 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.12.0-rc1",
-    "@liveblocks/core": "2.12.0-rc1",
-    "@liveblocks/react": "2.12.0-rc1",
+    "@liveblocks/client": "2.12.1-test1",
+    "@liveblocks/core": "2.12.1-test1",
+    "@liveblocks/react": "2.12.1-test1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",