@liveblocks/react-ui 2.18.3 → 2.18.4-uns2

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 { Permission } from \"@liveblocks/core\";\nimport {\n  useCreateRoomComment,\n  useCreateRoomThread,\n  useEditRoomComment,\n  useLayoutEffect,\n  useResolveMentionSuggestions,\n  useRoomOrNull,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { FLOATING_ELEMENT_SIDE_OFFSET } from \"../constants\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { BoldIcon } from \"../icons/Bold\";\nimport { CodeIcon } from \"../icons/Code\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { ItalicIcon } from \"../icons/Italic\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport { StrikethroughIcon } from \"../icons/Strikethrough\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerMarkToggleProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport type { ComposerBodyMark } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\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 { ShortcutTooltip, Tooltip, TooltipProvider } 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\ninterface MarkToggleProps extends ComposerMarkToggleProps {\n  icon?: ReactNode;\n  shortcut?: string;\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 to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)\n     */\n    showFormattingControls?: 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    /**\n     * @internal\n     */\n    roomId?: string;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showFormattingControls\"\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        onPointerDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        icon={<MentionIcon />}\n        {...props}\n      />\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            onPointerDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            icon={<EmojiIcon />}\n            {...props}\n          />\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          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          icon={<AttachmentIcon />}\n          {...props}\n        />\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 MarkToggle({\n  mark,\n  icon,\n  shortcut,\n  children,\n  ...props\n}: MarkToggleProps) {\n  const $ = useOverrides();\n  const label = useMemo(() => {\n    return $.COMPOSER_TOGGLE_MARK(mark);\n  }, [$, mark]);\n\n  return (\n    <ShortcutTooltip\n      content={label}\n      shortcut={shortcut}\n      sideOffset={FLOATING_ELEMENT_SIDE_OFFSET + 2}\n    >\n      <ComposerPrimitive.MarkToggle mark={mark} asChild {...props}>\n        <Button aria-label={label} variant=\"toolbar\" icon={icon}>\n          {children}\n        </Button>\n      </ComposerPrimitive.MarkToggle>\n    </ShortcutTooltip>\n  );\n}\n\ntype MarkToggles = {\n  [K in ComposerBodyMark]: ComponentType<PropsWithChildren>;\n};\n\nconst markToggles: MarkToggles = {\n  bold: () => <MarkToggle mark=\"bold\" shortcut=\"Mod-B\" icon={<BoldIcon />} />,\n  italic: () => (\n    <MarkToggle mark=\"italic\" shortcut=\"Mod-I\" icon={<ItalicIcon />} />\n  ),\n  strikethrough: () => (\n    <MarkToggle\n      mark=\"strikethrough\"\n      shortcut=\"Mod-Shift-S\"\n      icon={<StrikethroughIcon />}\n    />\n  ),\n  code: () => <MarkToggle mark=\"code\" shortcut=\"Mod-E\" icon={<CodeIcon />} />,\n};\n\nconst markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => (\n  <Toggle key={mark} />\n));\n\nfunction ComposerFloatingToolbar() {\n  return (\n    <ComposerPrimitive.FloatingToolbar className=\"lb-root lb-portal lb-elevation lb-composer-floating-toolbar\">\n      {markTogglesList}\n    </ComposerPrimitive.FloatingToolbar>\n  );\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  const { roomId } = useComposerEditorContext();\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      roomId={roomId}\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 editorRequiredComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showFormattingControls = 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  const components = useMemo(() => {\n    return {\n      ...editorRequiredComponents,\n      FloatingToolbar: showFormattingControls\n        ? ComposerFloatingToolbar\n        : undefined,\n    };\n  }, [showFormattingControls]);\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={components}\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 content={$.COMPOSER_SEND} shortcut=\"Enter\">\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onPointerDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                      icon={<SendIcon />}\n                    />\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\nexport const ComposerRoomIdContext = createContext<string | null>(null);\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      showFormattingControls = true,\n      showAttribution,\n      roomId: _roomId,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const room = useRoomOrNull();\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\n        \"Composer must be a descendant of RoomProvider component\"\n      );\n    }\n\n    const createThread = useCreateRoomThread(roomId);\n    const createComment = useCreateRoomComment(roomId);\n    const editComment = useEditRoomComment(roomId);\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      useResolveMentionSuggestions() !== 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 canCommentFallback = useSyncExternalStore(\n      useCallback(\n        (callback) => {\n          if (room === null) return () => {};\n          return room.events.self.subscribeOnce(callback);\n        },\n        [room]\n      ),\n      useCallback(() => {\n        return room?.getSelf()?.canComment ?? true;\n      }, [room]),\n      useCallback(() => true, [])\n    );\n\n    const permissions = useRoomPermissions(roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : canCommentFallback;\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 && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus, canComment]\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 && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, canComment]\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 || !canComment}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n          roomId={roomId}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            showFormattingControls={showFormattingControls}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAqOA;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;AAC7C;AACN;AACG;AACO;AACf;AACN;AAGN;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;AAC7C;AACN;AACG;AACK;AACb;AACN;AACF;AACF;AAGN;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC7C;AACN;AACG;AACU;AAClB;AACN;AACF;AAGN;AAEA;AACE;AACG;AAAoC;AAClC;AAAA;AACA;AAAK;AAAgB;AAAA;AAG5B;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AAEW;AACH;AAEP;AAAC;AACC;AACU;AACZ;AACC;AACC;AACU;AACZ;AAAA;AAEH;AACH;AAGN;AAEA;AAAoB;AAClB;AACA;AACA;AACA;AAEF;AACE;AACA;AACE;AAAkC;AAGpC;AACG;AACU;AACT;AAC2C;AAE1C;AAA6B;AAAmB;AAAK;AACnD;AAAmB;AAAe;AAAU;AAC1C;AACH;AACF;AAGN;AAMA;AAAiC;AAClB;AAAgB;AAAgB;AAAwB;AAAI;AAEtE;AAAgB;AAAkB;AAA0B;AAAI;AAGhE;AACM;AACI;AACgB;AAC3B;AAEW;AAAgB;AAAgB;AAAwB;AACvE;AAEA;AAIA;AACE;AACG;AAA4C;AAC1C;AAGP;AAEA;AACE;AACG;AAAuB;AAAsB;AAC3C;AAGP;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AACA;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AAEC;AACA;AACF;AAEH;AACH;AAGN;AAEA;AAA2D;AAChD;AACW;AAEtB;AAEA;AAAiC;AACb;AACO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACE;AAAO;AACF;AAGC;AACN;AAGF;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAChD;AAAC;AACW;AACD;AACM;AACf;AACA;AACA;AACA;AACO;AACT;AACqB;AAAoB;AAAsB;AAE5D;AAAc;AACb;AAAC;AAAc;AACZ;AACE;AACU;AACT;AACF;AAED;AACU;AACW;AACpB;AACF;AAEG;AACU;AACT;AACF;AAAA;AAEJ;AACiC;AAChC;AAAc;AAEX;AACG;AAA2B;AAAwB;AACjD;AAAgC;AAC9B;AACgB;AACN;AACC;AACF;AACM;AACE;AAClB;AACF;AACF;AACF;AAEJ;AAAA;AACF;AAGC;AAAc;AACZ;AAAc;AACb;AAAgB;AACb;AAAA;AACL;AACF;AAAA;AAIR;AAEa;AAQN;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AACO;AACzB;AACQ;AACL;AAIL;AAEA;AACA;AACE;AAAU;AACR;AACF;AAGF;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AAA2B;AACzB;AAEI;AAAmB;AAAa;AAChC;AAA8C;AAChD;AACK;AACP;AAEE;AAAsC;AAC/B;AACiB;AAG5B;AACA;AAMA;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AACuC;AAGzC;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AAC8B;AAGhC;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;AACG;AACE;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACe;AACvB;AACyB;AACF;AACvB;AAEC;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AACF;AACF;AACF;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 { Permission } from \"@liveblocks/core\";\nimport {\n  useCreateRoomComment,\n  useCreateRoomThread,\n  useEditRoomComment,\n  useLayoutEffect,\n  useResolveMentionSuggestions,\n  useRoomOrNull,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { FLOATING_ELEMENT_SIDE_OFFSET } from \"../constants\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { BoldIcon } from \"../icons/Bold\";\nimport { CodeIcon } from \"../icons/Code\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { ItalicIcon } from \"../icons/Italic\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport { StrikethroughIcon } from \"../icons/Strikethrough\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerMarkToggleProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport type { ComposerBodyMark } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\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 { ShortcutTooltip, Tooltip, TooltipProvider } 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\ninterface MarkToggleProps extends ComposerMarkToggleProps {\n  icon?: ReactNode;\n  shortcut?: string;\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 to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)\n     */\n    showFormattingControls?: 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    /**\n     * @internal\n     */\n    roomId?: string;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showFormattingControls\"\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        onPointerDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        icon={<MentionIcon />}\n        {...props}\n      />\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            onPointerDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            icon={<EmojiIcon />}\n            {...props}\n          />\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          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          icon={<AttachmentIcon />}\n          {...props}\n        />\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 MarkToggle({\n  mark,\n  icon,\n  shortcut,\n  children,\n  ...props\n}: MarkToggleProps) {\n  const $ = useOverrides();\n  const label = useMemo(() => {\n    return $.COMPOSER_TOGGLE_MARK(mark);\n  }, [$, mark]);\n\n  return (\n    <ShortcutTooltip\n      content={label}\n      shortcut={shortcut}\n      sideOffset={FLOATING_ELEMENT_SIDE_OFFSET + 2}\n    >\n      <ComposerPrimitive.MarkToggle mark={mark} asChild {...props}>\n        <Button aria-label={label} variant=\"toolbar\" icon={icon}>\n          {children}\n        </Button>\n      </ComposerPrimitive.MarkToggle>\n    </ShortcutTooltip>\n  );\n}\n\ntype MarkToggles = {\n  [K in ComposerBodyMark]: ComponentType<PropsWithChildren>;\n};\n\nconst markToggles: MarkToggles = {\n  bold: () => <MarkToggle mark=\"bold\" shortcut=\"Mod-B\" icon={<BoldIcon />} />,\n  italic: () => (\n    <MarkToggle mark=\"italic\" shortcut=\"Mod-I\" icon={<ItalicIcon />} />\n  ),\n  strikethrough: () => (\n    <MarkToggle\n      mark=\"strikethrough\"\n      shortcut=\"Mod-Shift-S\"\n      icon={<StrikethroughIcon />}\n    />\n  ),\n  code: () => <MarkToggle mark=\"code\" shortcut=\"Mod-E\" icon={<CodeIcon />} />,\n};\n\nconst markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => (\n  <Toggle key={mark} />\n));\n\nfunction ComposerFloatingToolbar() {\n  return (\n    <ComposerPrimitive.FloatingToolbar className=\"lb-root lb-portal lb-elevation lb-composer-floating-toolbar\">\n      {markTogglesList}\n    </ComposerPrimitive.FloatingToolbar>\n  );\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  const { roomId } = useComposerEditorContext();\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      roomId={roomId}\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 editorRequiredComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showFormattingControls = 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  const components = useMemo(() => {\n    return {\n      ...editorRequiredComponents,\n      FloatingToolbar: showFormattingControls\n        ? ComposerFloatingToolbar\n        : undefined,\n    };\n  }, [showFormattingControls]);\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={components}\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 content={$.COMPOSER_SEND} shortcut=\"Enter\">\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onPointerDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                      icon={<SendIcon />}\n                    />\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\nexport const ComposerRoomIdContext = createContext<string | null>(null);\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      showFormattingControls = true,\n      showAttribution,\n      roomId: _roomId,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const room = useRoomOrNull();\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\n        \"Composer must be a descendant of RoomProvider component\"\n      );\n    }\n\n    const createThread = useCreateRoomThread(roomId);\n    const createComment = useCreateRoomComment(roomId);\n    const editComment = useEditRoomComment(roomId);\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      useResolveMentionSuggestions() !== 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 canCommentFallback = useSyncExternalStore(\n      useCallback(\n        (callback) => {\n          if (room === null) return () => {};\n          return room.events.self.subscribeOnce(callback);\n        },\n        [room]\n      ),\n      useCallback(() => {\n        return room?.getSelf()?.canComment ?? true;\n      }, [room]),\n      useCallback(() => true, [])\n    );\n\n    const permissions = useRoomPermissions(roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : canCommentFallback;\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 && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus, canComment]\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 && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, canComment]\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 || !canComment}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n          roomId={roomId}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            showFormattingControls={showFormattingControls}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAqOA;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;AAC7C;AACN;AACG;AACO;AACf;AACN;AAGN;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;AAC7C;AACN;AACG;AACK;AACb;AACN;AACF;AACF;AAGN;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC7C;AACN;AACG;AACU;AAClB;AACN;AACF;AAGN;AAEA;AACE;AACG;AAAoC;AAClC;AAAA;AACA;AAAK;AAAgB;AAAA;AAG5B;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AAEW;AACH;AAEP;AAAC;AACC;AACU;AACZ;AACC;AACC;AACU;AACZ;AAAA;AAEH;AACH;AAGN;AAEA;AAAoB;AAClB;AACA;AACA;AACA;AAEF;AACE;AACA;AACE;AAAkC;AAGpC;AACG;AACU;AACT;AAC2C;AAE1C;AAA6B;AAAmB;AAAK;AACnD;AAAmB;AAAe;AAAU;AAC1C;AACH;AACF;AAGN;AAMA;AAAiC;AAClB;AAAgB;AAAgB;AAAwB;AAAI;AAEtE;AAAgB;AAAkB;AAA0B;AAAI;AAGhE;AACM;AACI;AACgB;AAC3B;AAEW;AAAgB;AAAgB;AAAwB;AACvE;AAEA;AAIA;AACE;AACG;AAA4C;AAC1C;AAGP;AAEA;AACE;AACG;AAAuB;AAAsB;AAC3C;AAGP;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AACA;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AAEC;AACA;AACF;AAEH;AACH;AAGN;AAEA;AAA2D;AAChD;AACW;AAEtB;AAEA;AAAiC;AACb;AACO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACE;AAAO;AACF;AAGC;AACN;AAGF;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAChD;AAAC;AACW;AACD;AACM;AACf;AACA;AACA;AACA;AACO;AACT;AACqB;AAAoB;AAAsB;AAE5D;AAAc;AACb;AAAC;AAAc;AACZ;AACE;AACU;AACT;AACF;AAED;AACU;AACW;AACpB;AACF;AAEG;AACU;AACT;AACF;AAAA;AAEJ;AACiC;AAChC;AAAc;AAEX;AACG;AAA2B;AAAwB;AACjD;AAAgC;AAC9B;AACgB;AACN;AACC;AACF;AACM;AACE;AAClB;AACF;AACF;AACF;AAEJ;AAAA;AACF;AAGC;AAAc;AACZ;AAAc;AACb;AAAgB;AACb;AAAA;AACL;AACF;AAAA;AAIR;AAEa;AAQN;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AACO;AACzB;AACQ;AACL;AAIL;AAEA;AACA;AACE;AAAU;AACR;AACF;AAGF;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AAA2B;AACzB;AAEI;AAAmB;AAAa;AAChC;AAA8C;AAChD;AACK;AACP;AAEE;AAAsC;AAC/B;AACiB;AAG5B;AACA;AAMA;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AACuC;AAGzC;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AAC8B;AAGhC;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;AACG;AACE;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACe;AACvB;AACyB;AACF;AACvB;AAEC;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AACF;AACF;AACF;AAGN;;"}

package/dist/components/HistoryVersionSummary.cjs

@@ -0,0 +1,45 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var overrides = require('../overrides.cjs');
+require('../primitives/index.cjs');
+var classNames = require('../utils/class-names.cjs');
+var List = require('./internal/List.cjs');
+var User = require('./internal/User.cjs');
+var Timestamp = require('../primitives/Timestamp.cjs');
+
+
+const AUTHORS_TRUNCATE = 3;
+const HistoryVersionSummary = react.forwardRef(({ version, selected, className, ...props }, forwardedRef) => {
+  const $ = overrides.useOverrides();
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
+    ...props,
+    className: classNames.classNames("lb-root lb-history-version-summary", className),
+    ref: forwardedRef,
+    "data-selected": selected ? "" : void 0,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Timestamp.Timestamp, {
+        locale: $.locale,
+        date: version.createdAt,
+        className: "lb-date lb-history-version-summary-date"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: "lb-history-version-summary-authors",
+        children: /* @__PURE__ */ jsxRuntime.jsx(List.List, {
+          values: version.authors.map((author) => /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+            userId: author.id,
+            replaceSelf: true
+          }, author.id)),
+          formatRemaining: $.LIST_REMAINING_USERS,
+          truncate: AUTHORS_TRUNCATE,
+          locale: $.locale
+        })
+      })
+    ]
+  });
+});
+
+exports.HistoryVersionSummary = HistoryVersionSummary;
+//# sourceMappingURL=HistoryVersionSummary.cjs.map

package/dist/components/{HistoryVersionSummary.mjs.map → HistoryVersionSummary.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummary.mjs","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AAAA;AAYA;AAca;AAIX;AAEA;AACG;AACK;AACiE;AAChE;AAC0B;AAE/B;AAAC;AACW;AACI;AACJ;AACZ;AACC;AAAe;AACb;AAEI;AAAoC;AAAe;AACrD;AACkB;AACT;AACA;AACZ;AACF;AAAA;AAGN;;"}
+{"version":3,"file":"HistoryVersionSummary.cjs","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAYA;AAca;AAIX;AAEA;AACG;AACK;AACiE;AAChE;AAC0B;AAE/B;AAAC;AACW;AACI;AACJ;AACZ;AACC;AAAe;AACb;AAEI;AAAoC;AAAe;AACrD;AACkB;AACT;AACA;AACZ;AACF;AAAA;AAGN;;"}

package/dist/components/HistoryVersionSummary.js

@@ -1,34 +1,32 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var overrides = require('../overrides.js');
-require('../primitives/index.js');
-var classNames = require('../utils/class-names.js');
-var List = require('./internal/List.js');
-var User = require('./internal/User.js');
-var Timestamp = require('../primitives/Timestamp.js');
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useOverrides } from '../overrides.js';
+import '../primitives/index.js';
+import { classNames } from '../utils/class-names.js';
+import { List } from './internal/List.js';
+import { User } from './internal/User.js';
+import { Timestamp } from '../primitives/Timestamp.js';
 
 
 const AUTHORS_TRUNCATE = 3;
-const HistoryVersionSummary = react.forwardRef(({ version, selected, className, ...props }, forwardedRef) => {
-  const $ = overrides.useOverrides();
-  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
+const HistoryVersionSummary = forwardRef(({ version, selected, className, ...props }, forwardedRef) => {
+  const $ = useOverrides();
+  return /* @__PURE__ */ jsxs("button", {
     ...props,
-    className: classNames.classNames("lb-root lb-history-version-summary", className),
+    className: classNames("lb-root lb-history-version-summary", className),
     ref: forwardedRef,
     "data-selected": selected ? "" : void 0,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Timestamp.Timestamp, {
+      /* @__PURE__ */ jsx(Timestamp, {
         locale: $.locale,
         date: version.createdAt,
         className: "lb-date lb-history-version-summary-date"
       }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
+      /* @__PURE__ */ jsx("span", {
         className: "lb-history-version-summary-authors",
-        children: /* @__PURE__ */ jsxRuntime.jsx(List.List, {
-          values: version.authors.map((author) => /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+        children: /* @__PURE__ */ jsx(List, {
+          values: version.authors.map((author) => /* @__PURE__ */ jsx(User, {
             userId: author.id,
             replaceSelf: true
           }, author.id)),
@@ -41,5 +39,5 @@ const HistoryVersionSummary = react.forwardRef(({ version, selected, className,
   });
 });
 
-exports.HistoryVersionSummary = HistoryVersionSummary;
+export { HistoryVersionSummary };
 //# sourceMappingURL=HistoryVersionSummary.js.map

package/dist/components/HistoryVersionSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummary.js","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAYA;AAca;AAIX;AAEA;AACG;AACK;AACiE;AAChE;AAC0B;AAE/B;AAAC;AACW;AACI;AACJ;AACZ;AACC;AAAe;AACb;AAEI;AAAoC;AAAe;AACrD;AACkB;AACT;AACA;AACZ;AACF;AAAA;AAGN;;"}
+{"version":3,"file":"HistoryVersionSummary.js","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AAAA;AAYA;AAca;AAIX;AAEA;AACG;AACK;AACiE;AAChE;AAC0B;AAE/B;AAAC;AACW;AACI;AACJ;AACZ;AACC;AAAe;AACb;AAEI;AAAoC;AAAe;AACrD;AACkB;AACT;AACA;AACZ;AACF;AAAA;AAGN;;"}

package/dist/components/HistoryVersionSummaryList.cjs

@@ -0,0 +1,25 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var classNames = require('../utils/class-names.cjs');
+
+
+const HistoryVersionSummaryList = react.forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", {
+    className: classNames.classNames(
+      "lb-root lb-history-version-summary-list",
+      className
+    ),
+    ...props,
+    ref: forwardedRef,
+    children: react.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx("li", {
+      className: "lb-history-version-summary-list-item",
+      children: child
+    }, index))
+  });
+});
+
+exports.HistoryVersionSummaryList = HistoryVersionSummaryList;
+//# sourceMappingURL=HistoryVersionSummaryList.cjs.map

package/dist/components/{HistoryVersionSummaryList.mjs.map → HistoryVersionSummaryList.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummaryList.mjs","sources":["../../src/components/HistoryVersionSummaryList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays versions summaries as a list.\n *\n * @example\n * <HistoryVersionSummaryList>\n *   {versions.map((version) => (\n *     <HistoryVersionSummary key={version.id} version={version} />\n *   ))}\n * </HistoryVersionSummaryList>\n */\nexport const HistoryVersionSummaryList = forwardRef<\n  HTMLOListElement,\n  HistoryVersionSummaryListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\n        \"lb-root lb-history-version-summary-list\",\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-history-version-summary-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;AAAA;AAmBa;AAIX;AACG;AACY;AACT;AACA;AACF;AACI;AACC;AAGF;AAAyB;AACvB;AAEJ;AAGP;;"}
+{"version":3,"file":"HistoryVersionSummaryList.cjs","sources":["../../src/components/HistoryVersionSummaryList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays versions summaries as a list.\n *\n * @example\n * <HistoryVersionSummaryList>\n *   {versions.map((version) => (\n *     <HistoryVersionSummary key={version.id} version={version} />\n *   ))}\n * </HistoryVersionSummaryList>\n */\nexport const HistoryVersionSummaryList = forwardRef<\n  HTMLOListElement,\n  HistoryVersionSummaryListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\n        \"lb-root lb-history-version-summary-list\",\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-history-version-summary-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAAA;AAmBa;AAIX;AACG;AACY;AACT;AACA;AACF;AACI;AACC;AAGF;AAAyB;AACvB;AAEJ;AAGP;;"}

package/dist/components/HistoryVersionSummaryList.js

@@ -1,25 +1,23 @@
 "use client";
-'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children } from 'react';
+import { classNames } from '../utils/class-names.js';
 
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var classNames = require('../utils/class-names.js');
 
-
-const HistoryVersionSummaryList = react.forwardRef(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", {
-    className: classNames.classNames(
+const HistoryVersionSummaryList = forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsx("ol", {
+    className: classNames(
       "lb-root lb-history-version-summary-list",
       className
     ),
     ...props,
     ref: forwardedRef,
-    children: react.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx("li", {
+    children: Children.map(children, (child, index) => /* @__PURE__ */ jsx("li", {
       className: "lb-history-version-summary-list-item",
       children: child
     }, index))
   });
 });
 
-exports.HistoryVersionSummaryList = HistoryVersionSummaryList;
+export { HistoryVersionSummaryList };
 //# sourceMappingURL=HistoryVersionSummaryList.js.map

package/dist/components/HistoryVersionSummaryList.js.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummaryList.js","sources":["../../src/components/HistoryVersionSummaryList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays versions summaries as a list.\n *\n * @example\n * <HistoryVersionSummaryList>\n *   {versions.map((version) => (\n *     <HistoryVersionSummary key={version.id} version={version} />\n *   ))}\n * </HistoryVersionSummaryList>\n */\nexport const HistoryVersionSummaryList = forwardRef<\n  HTMLOListElement,\n  HistoryVersionSummaryListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\n        \"lb-root lb-history-version-summary-list\",\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-history-version-summary-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAAA;AAmBa;AAIX;AACG;AACY;AACT;AACA;AACF;AACI;AACC;AAGF;AAAyB;AACvB;AAEJ;AAGP;;"}
+{"version":3,"file":"HistoryVersionSummaryList.js","sources":["../../src/components/HistoryVersionSummaryList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays versions summaries as a list.\n *\n * @example\n * <HistoryVersionSummaryList>\n *   {versions.map((version) => (\n *     <HistoryVersionSummary key={version.id} version={version} />\n *   ))}\n * </HistoryVersionSummaryList>\n */\nexport const HistoryVersionSummaryList = forwardRef<\n  HTMLOListElement,\n  HistoryVersionSummaryListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\n        \"lb-root lb-history-version-summary-list\",\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-history-version-summary-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;AAAA;AAmBa;AAIX;AACG;AACY;AACT;AACA;AACF;AACI;AACC;AAGF;AAAyB;AACvB;AAEJ;AAGP;;"}