@liveblocks/react-ui 2.14.0 → 2.15.0-debug1

package/dist/primitives/Composer/index.mjs

@@ -1,9 +1,9 @@
-'use client';
-import { kInternal, createCommentAttachmentId, makeEventSource } from '@liveblocks/core';
-import { useClientOrNull, useMentionSuggestions, useRoomOrNull, useSyncSource } from '@liveblocks/react/_private';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createCommentAttachmentId, makeEventSource } from '@liveblocks/core';
+import { useClientOrNull, useResolveMentionSuggestions, useMentionSuggestions, useRoomOrNull, useSyncSource } from '@liveblocks/react/_private';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
-import React__default, { forwardRef, useRef, useMemo, useCallback, useEffect, useState, useImperativeHandle } from 'react';
+import { forwardRef, useRef, useMemo, useCallback, useEffect, useState, useId, useImperativeHandle, useLayoutEffect } from 'react';
 import { Transforms, Editor, insertText, createEditor, Range } from 'slate';
 import { withHistory } from 'slate-history';
 import { useSelected, ReactEditor, Slate, Editable, useSlateStatic, withReact } from 'slate-react';
@@ -22,10 +22,8 @@ import { isKey } from '../../utils/is-key.mjs';
 import { usePersist, useAnimationPersist, Persist } from '../../utils/Persist.mjs';
 import { Portal } from '../../utils/Portal.mjs';
 import { requestSubmit } from '../../utils/request-submit.mjs';
-import { useId } from '../../utils/use-id.mjs';
 import { useIndex } from '../../utils/use-index.mjs';
 import { useInitial } from '../../utils/use-initial.mjs';
-import { useLayoutEffect } from '../../utils/use-layout-effect.mjs';
 import { useObservable } from '../../utils/use-observable.mjs';
 import { useRefs } from '../../utils/use-refs.mjs';
 import { toAbsoluteUrl } from '../Comment/utils.mjs';
@@ -78,12 +76,16 @@ function ComposerEditorMentionWrapper({
   element
 }) {
   const isSelected = useSelected();
-  return /* @__PURE__ */ React__default.createElement("span", {
-    ...attributes
-  }, element.id ? /* @__PURE__ */ React__default.createElement(Mention, {
-    userId: element.id,
-    isSelected
-  }) : null, children);
+  return /* @__PURE__ */ jsxs("span", {
+    ...attributes,
+    children: [
+      element.id ? /* @__PURE__ */ jsx(Mention, {
+        userId: element.id,
+        isSelected
+      }) : null,
+      children
+    ]
+  });
 }
 function ComposerEditorLinkWrapper({
   Link,
@@ -95,11 +97,13 @@ function ComposerEditorLinkWrapper({
     () => toAbsoluteUrl(element.url) ?? element.url,
     [element.url]
   );
-  return /* @__PURE__ */ React__default.createElement("span", {
-    ...attributes
-  }, /* @__PURE__ */ React__default.createElement(Link, {
-    href
-  }, children));
+  return /* @__PURE__ */ jsx("span", {
+    ...attributes,
+    children: /* @__PURE__ */ jsx(Link, {
+      href,
+      children
+    })
+  });
 }
 function ComposerEditorMentionSuggestionsWrapper({
   id,
@@ -144,32 +148,36 @@ function ComposerEditorMentionSuggestionsWrapper({
     const domRange = getDOMRange(editor, mentionDraft.range);
     setReference(domRange ?? null);
   }, [setReference, editor, mentionDraft]);
-  return /* @__PURE__ */ React__default.createElement(Persist, null, isOpen ? /* @__PURE__ */ React__default.createElement(ComposerSuggestionsContext.Provider, {
-    value: {
-      id,
-      itemId,
-      selectedValue: selectedUserId,
-      setSelectedValue: setSelectedUserId,
-      onItemSelect,
-      placement,
-      dir,
-      ref: contentRef
-    }
-  }, /* @__PURE__ */ React__default.createElement(Portal, {
-    ref: setFloating,
-    container: portalContainer,
-    style: {
-      position: strategy,
-      top: 0,
-      left: 0,
-      transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
-      minWidth: "max-content",
-      zIndex: contentZIndex
-    }
-  }, /* @__PURE__ */ React__default.createElement(MentionSuggestions, {
-    userIds,
-    selectedUserId
-  }))) : null);
+  return /* @__PURE__ */ jsx(Persist, {
+    children: isOpen ? /* @__PURE__ */ jsx(ComposerSuggestionsContext.Provider, {
+      value: {
+        id,
+        itemId,
+        selectedValue: selectedUserId,
+        setSelectedValue: setSelectedUserId,
+        onItemSelect,
+        placement,
+        dir,
+        ref: contentRef
+      },
+      children: /* @__PURE__ */ jsx(Portal, {
+        ref: setFloating,
+        container: portalContainer,
+        style: {
+          position: strategy,
+          top: 0,
+          left: 0,
+          transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
+          minWidth: "max-content",
+          zIndex: contentZIndex
+        },
+        children: /* @__PURE__ */ jsx(MentionSuggestions, {
+          userIds,
+          selectedUserId
+        })
+      })
+    }) : null
+  });
 }
 function ComposerEditorFloatingToolbarWrapper({
   id,
@@ -227,25 +235,29 @@ function ComposerEditorFloatingToolbarWrapper({
       }
     });
   });
-  return /* @__PURE__ */ React__default.createElement(Persist, null, isOpen ? /* @__PURE__ */ React__default.createElement(ComposerFloatingToolbarContext.Provider, {
-    value: {
-      id,
-      placement,
-      dir,
-      ref: contentRef
-    }
-  }, /* @__PURE__ */ React__default.createElement(Portal, {
-    ref: setFloating,
-    container: portalContainer,
-    style: {
-      position: strategy,
-      top: 0,
-      left: 0,
-      transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
-      minWidth: "max-content",
-      zIndex: contentZIndex
-    }
-  }, /* @__PURE__ */ React__default.createElement(FloatingToolbar, null))) : null);
+  return /* @__PURE__ */ jsx(Persist, {
+    children: isOpen ? /* @__PURE__ */ jsx(ComposerFloatingToolbarContext.Provider, {
+      value: {
+        id,
+        placement,
+        dir,
+        ref: contentRef
+      },
+      children: /* @__PURE__ */ jsx(Portal, {
+        ref: setFloating,
+        container: portalContainer,
+        style: {
+          position: strategy,
+          top: 0,
+          left: 0,
+          transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
+          minWidth: "max-content",
+          zIndex: contentZIndex
+        },
+        children: /* @__PURE__ */ jsx(FloatingToolbar, {})
+      })
+    }) : null
+  });
 }
 const ComposerFloatingToolbar = forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
   const [isPresent] = usePersist();
@@ -271,7 +283,7 @@ const ComposerFloatingToolbar = forwardRef(({ children, onPointerDown, style, as
     },
     [onPointerDown]
   );
-  return /* @__PURE__ */ React__default.createElement(Component, {
+  return /* @__PURE__ */ jsx(Component, {
     dir,
     role: "toolbar",
     id,
@@ -288,8 +300,9 @@ const ComposerFloatingToolbar = forwardRef(({ children, onPointerDown, style, as
       overflowX: "auto",
       ...style
     },
-    ref: mergedRefs
-  }, children);
+    ref: mergedRefs,
+    children
+  });
 });
 function ComposerEditorElement({
   Mention,
@@ -299,73 +312,86 @@ function ComposerEditorElement({
   const { attributes, children, element } = props;
   switch (element.type) {
     case "mention":
-      return /* @__PURE__ */ React__default.createElement(ComposerEditorMentionWrapper, {
+      return /* @__PURE__ */ jsx(ComposerEditorMentionWrapper, {
         Mention,
         ...props
       });
     case "auto-link":
     case "custom-link":
-      return /* @__PURE__ */ React__default.createElement(ComposerEditorLinkWrapper, {
+      return /* @__PURE__ */ jsx(ComposerEditorLinkWrapper, {
         Link,
         ...props
       });
     case "paragraph":
-      return /* @__PURE__ */ React__default.createElement("p", {
+      return /* @__PURE__ */ jsx("p", {
         ...attributes,
-        style: { position: "relative" }
-      }, children);
+        style: { position: "relative" },
+        children
+      });
     default:
       return null;
   }
 }
 function ComposerEditorLeaf({ attributes, children, leaf }) {
   if (leaf.bold) {
-    children = /* @__PURE__ */ React__default.createElement("strong", null, children);
+    children = /* @__PURE__ */ jsx("strong", {
+      children
+    });
   }
   if (leaf.italic) {
-    children = /* @__PURE__ */ React__default.createElement("em", null, children);
+    children = /* @__PURE__ */ jsx("em", {
+      children
+    });
   }
   if (leaf.strikethrough) {
-    children = /* @__PURE__ */ React__default.createElement("s", null, children);
+    children = /* @__PURE__ */ jsx("s", {
+      children
+    });
   }
   if (leaf.code) {
-    children = /* @__PURE__ */ React__default.createElement("code", null, children);
+    children = /* @__PURE__ */ jsx("code", {
+      children
+    });
   }
-  return /* @__PURE__ */ React__default.createElement("span", {
-    ...attributes
-  }, children);
+  return /* @__PURE__ */ jsx("span", {
+    ...attributes,
+    children
+  });
 }
 function ComposerEditorPlaceholder({
   attributes,
   children
 }) {
   const { opacity: _opacity, ...style } = attributes.style;
-  return /* @__PURE__ */ React__default.createElement("span", {
+  return /* @__PURE__ */ jsx("span", {
     ...attributes,
     style,
-    "data-placeholder": ""
-  }, children);
+    "data-placeholder": "",
+    children
+  });
 }
 const ComposerMention = forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? Slot : "span";
     const isSelected = useSelected();
-    return /* @__PURE__ */ React__default.createElement(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       "data-selected": isSelected || void 0,
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
 const ComposerLink = forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? Slot : "a";
-    return /* @__PURE__ */ React__default.createElement(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       target: "_blank",
       rel: "noopener noreferrer nofollow",
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
 const ComposerSuggestions = forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
@@ -383,7 +409,7 @@ const ComposerSuggestions = forwardRef(({ children, style, asChild, ...props },
   );
   const Component = asChild ? Slot : "div";
   useAnimationPersist(ref);
-  return /* @__PURE__ */ React__default.createElement(Component, {
+  return /* @__PURE__ */ jsx(Component, {
     dir,
     ...props,
     "data-state": isPresent ? "open" : "closed",
@@ -396,19 +422,21 @@ const ComposerSuggestions = forwardRef(({ children, style, asChild, ...props },
       overflowY: "auto",
       ...style
     },
-    ref: mergedRefs
-  }, children);
+    ref: mergedRefs,
+    children
+  });
 });
 const ComposerSuggestionsList = forwardRef(({ children, asChild, ...props }, forwardedRef) => {
   const { id } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_NAME);
   const Component = asChild ? Slot : "ul";
-  return /* @__PURE__ */ React__default.createElement(Component, {
+  return /* @__PURE__ */ jsx(Component, {
     role: "listbox",
     id,
     "aria-label": "Suggestions list",
     ...props,
-    ref: forwardedRef
-  }, children);
+    ref: forwardedRef,
+    children
+  });
 });
 const ComposerSuggestionsListItem = forwardRef(
   ({
@@ -463,7 +491,7 @@ const ComposerSuggestionsListItem = forwardRef(
       },
       [onClick, onItemSelect, value]
     );
-    return /* @__PURE__ */ React__default.createElement(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       role: "option",
       id,
       "data-selected": isSelected || void 0,
@@ -472,24 +500,35 @@ const ComposerSuggestionsListItem = forwardRef(
       onPointerDown: handlePointerDown,
       onClick: handleClick,
       ...props,
-      ref: mergedRefs
-    }, children);
+      ref: mergedRefs,
+      children
+    });
   }
 );
 const defaultEditorComponents = {
   Link: ({ href, children }) => {
-    return /* @__PURE__ */ React__default.createElement(ComposerLink, {
-      href
-    }, children);
+    return /* @__PURE__ */ jsx(ComposerLink, {
+      href,
+      children
+    });
   },
   Mention: ({ userId }) => {
-    return /* @__PURE__ */ React__default.createElement(ComposerMention, null, MENTION_CHARACTER, userId);
+    return /* @__PURE__ */ jsxs(ComposerMention, {
+      children: [
+        MENTION_CHARACTER,
+        userId
+      ]
+    });
   },
   MentionSuggestions: ({ userIds }) => {
-    return userIds.length > 0 ? /* @__PURE__ */ React__default.createElement(ComposerSuggestions, null, /* @__PURE__ */ React__default.createElement(ComposerSuggestionsList, null, userIds.map((userId) => /* @__PURE__ */ React__default.createElement(ComposerSuggestionsListItem, {
-      key: userId,
-      value: userId
-    }, userId)))) : null;
+    return userIds.length > 0 ? /* @__PURE__ */ jsx(ComposerSuggestions, {
+      children: /* @__PURE__ */ jsx(ComposerSuggestionsList, {
+        children: userIds.map((userId) => /* @__PURE__ */ jsx(ComposerSuggestionsListItem, {
+          value: userId,
+          children: userId
+        }, userId))
+      })
+    }) : null;
   }
 };
 const ComposerEditor = forwardRef(
@@ -525,7 +564,8 @@ const ComposerEditor = forwardRef(
       [components]
     );
     const [hasFloatingToolbarRange, setHasFloatingToolbarRange] = useState(false);
-    const hasResolveMentionSuggestions = client ? client[kInternal].resolveMentionSuggestions !== void 0 : true;
+    const resolveMentionSuggestions = useResolveMentionSuggestions();
+    const hasResolveMentionSuggestions = client ? resolveMentionSuggestions : true;
     const [mentionDraft, setMentionDraft] = useState();
     const mentionSuggestions = useMentionSuggestions(
       roomId,
@@ -552,7 +592,7 @@ const ComposerEditor = forwardRef(
     );
     const renderElement = useCallback(
       (props2) => {
-        return /* @__PURE__ */ React__default.createElement(ComposerEditorElement, {
+        return /* @__PURE__ */ jsx(ComposerEditorElement, {
           Mention,
           Link,
           ...props2
@@ -731,45 +771,50 @@ const ComposerEditor = forwardRef(
         select();
       }
     }, [editor, select, isFocused]);
-    return /* @__PURE__ */ React__default.createElement(Slate, {
+    return /* @__PURE__ */ jsxs(Slate, {
       editor,
       initialValue: initialEditorValue,
-      onChange: handleChange
-    }, /* @__PURE__ */ React__default.createElement(Editable, {
-      dir,
-      enterKeyHint: mentionDraft ? "enter" : "send",
-      autoCapitalize: "sentences",
-      "aria-label": "Composer editor",
-      "data-focused": isFocused || void 0,
-      "data-disabled": isDisabled || void 0,
-      ...additionalProps,
-      ...props,
-      readOnly: isDisabled,
-      disabled: isDisabled,
-      onKeyDown: handleKeyDown,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      renderElement,
-      renderLeaf: ComposerEditorLeaf,
-      renderPlaceholder: ComposerEditorPlaceholder
-    }), hasResolveMentionSuggestions && /* @__PURE__ */ React__default.createElement(ComposerEditorMentionSuggestionsWrapper, {
-      dir,
-      mentionDraft,
-      setMentionDraft,
-      selectedUserId: selectedMentionSuggestionUserId,
-      setSelectedUserId: setSelectedMentionSuggestionUserId,
-      userIds: mentionSuggestions,
-      id: suggestionsListId,
-      itemId: suggestionsListItemId,
-      onItemSelect: createMention,
-      MentionSuggestions
-    }), FloatingToolbar && /* @__PURE__ */ React__default.createElement(ComposerEditorFloatingToolbarWrapper, {
-      dir,
-      id: floatingToolbarId,
-      hasFloatingToolbarRange,
-      setHasFloatingToolbarRange,
-      FloatingToolbar
-    }));
+      onChange: handleChange,
+      children: [
+        /* @__PURE__ */ jsx(Editable, {
+          dir,
+          enterKeyHint: mentionDraft ? "enter" : "send",
+          autoCapitalize: "sentences",
+          "aria-label": "Composer editor",
+          "data-focused": isFocused || void 0,
+          "data-disabled": isDisabled || void 0,
+          ...additionalProps,
+          ...props,
+          readOnly: isDisabled,
+          disabled: isDisabled,
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          renderElement,
+          renderLeaf: ComposerEditorLeaf,
+          renderPlaceholder: ComposerEditorPlaceholder
+        }),
+        hasResolveMentionSuggestions && /* @__PURE__ */ jsx(ComposerEditorMentionSuggestionsWrapper, {
+          dir,
+          mentionDraft,
+          setMentionDraft,
+          selectedUserId: selectedMentionSuggestionUserId,
+          setSelectedUserId: setSelectedMentionSuggestionUserId,
+          userIds: mentionSuggestions,
+          id: suggestionsListId,
+          itemId: suggestionsListItemId,
+          onItemSelect: createMention,
+          MentionSuggestions
+        }),
+        FloatingToolbar && /* @__PURE__ */ jsx(ComposerEditorFloatingToolbarWrapper, {
+          dir,
+          id: floatingToolbarId,
+          hasFloatingToolbarRange,
+          setHasFloatingToolbarRange,
+          FloatingToolbar
+        })
+      ]
+    });
   }
 );
 const MAX_ATTACHMENTS = 10;
@@ -1007,54 +1052,63 @@ const ComposerForm = forwardRef(
     useObservable(onEditorChange, () => {
       setMarks(getMarks(editor));
     });
-    return /* @__PURE__ */ React__default.createElement(ComposerEditorContext.Provider, {
+    return /* @__PURE__ */ jsx(ComposerEditorContext.Provider, {
       value: {
         editor,
         validate,
         setFocused,
         onEditorChange,
         roomId
-      }
-    }, /* @__PURE__ */ React__default.createElement(ComposerAttachmentsContext.Provider, {
-      value: {
-        createAttachments,
-        isUploadingAttachments,
-        hasMaxAttachments,
-        maxAttachments,
-        maxAttachmentSize
-      }
-    }, /* @__PURE__ */ React__default.createElement(ComposerContext.Provider, {
-      value: {
-        isDisabled,
-        isFocused,
-        isEmpty: isEmpty$1,
-        canSubmit,
-        submit,
-        clear,
-        select,
-        focus,
-        blur,
-        createMention,
-        insertText: insertText$1,
-        attachments,
-        attachFiles,
-        removeAttachment,
-        toggleMark: toggleMark$1,
-        marks
-      }
-    }, /* @__PURE__ */ React__default.createElement(Component, {
-      ...props,
-      onSubmit: handleSubmit,
-      ref: mergedRefs
-    }, /* @__PURE__ */ React__default.createElement("input", {
-      type: "file",
-      multiple: true,
-      ref: fileInputRef,
-      onChange: handleAttachmentsInputChange,
-      onClick: stopPropagation,
-      tabIndex: -1,
-      style: { display: "none" }
-    }), /* @__PURE__ */ React__default.createElement(Slottable, null, children)))));
+      },
+      children: /* @__PURE__ */ jsx(ComposerAttachmentsContext.Provider, {
+        value: {
+          createAttachments,
+          isUploadingAttachments,
+          hasMaxAttachments,
+          maxAttachments,
+          maxAttachmentSize
+        },
+        children: /* @__PURE__ */ jsx(ComposerContext.Provider, {
+          value: {
+            isDisabled,
+            isFocused,
+            isEmpty: isEmpty$1,
+            canSubmit,
+            submit,
+            clear,
+            select,
+            focus,
+            blur,
+            createMention,
+            insertText: insertText$1,
+            attachments,
+            attachFiles,
+            removeAttachment,
+            toggleMark: toggleMark$1,
+            marks
+          },
+          children: /* @__PURE__ */ jsxs(Component, {
+            ...props,
+            onSubmit: handleSubmit,
+            ref: mergedRefs,
+            children: [
+              /* @__PURE__ */ jsx("input", {
+                type: "file",
+                multiple: true,
+                ref: fileInputRef,
+                onChange: handleAttachmentsInputChange,
+                onClick: stopPropagation,
+                tabIndex: -1,
+                style: { display: "none" }
+              }),
+              /* @__PURE__ */ jsx(Slottable, {
+                children
+              })
+            ]
+          })
+        })
+      })
+    });
   }
 );
 const ComposerSubmit = forwardRef(
@@ -1062,12 +1116,13 @@ const ComposerSubmit = forwardRef(
     const Component = asChild ? Slot : "button";
     const { canSubmit, isDisabled: isComposerDisabled } = useComposer();
     const isDisabled = isComposerDisabled || disabled || !canSubmit;
-    return /* @__PURE__ */ React__default.createElement(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       type: "submit",
       ...props,
       ref: forwardedRef,
-      disabled: isDisabled
-    }, children);
+      disabled: isDisabled,
+      children
+    });
   }
 );
 const ComposerAttachFiles = forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
@@ -1084,13 +1139,14 @@ const ComposerAttachFiles = forwardRef(({ children, onClick, disabled, asChild,
     },
     [attachFiles, onClick]
   );
-  return /* @__PURE__ */ React__default.createElement(Component, {
+  return /* @__PURE__ */ jsx(Component, {
     type: "button",
     ...props,
     onClick: handleClick,
     ref: forwardedRef,
-    disabled: isDisabled
-  }, children);
+    disabled: isDisabled,
+    children
+  });
 });
 const ComposerAttachmentsDropArea = forwardRef(
   ({
@@ -1112,7 +1168,7 @@ const ComposerAttachmentsDropArea = forwardRef(
       onDrop,
       disabled: isDisabled
     });
-    return /* @__PURE__ */ React__default.createElement(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       ...dropAreaProps,
       "data-disabled": isDisabled ? "" : void 0,
       ...props,
@@ -1134,15 +1190,17 @@ const ComposerMarkToggle = forwardRef(
       },
       [mark, onClick, onValueChange, toggleMark]
     );
-    return /* @__PURE__ */ React__default.createElement(TogglePrimitive.Root, {
+    return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
       asChild: true,
       pressed: marks[mark],
       onClick: handleClick,
-      ...props
-    }, /* @__PURE__ */ React__default.createElement(Component, {
       ...props,
-      ref: forwardedRef
-    }, children));
+      children: /* @__PURE__ */ jsx(Component, {
+        ...props,
+        ref: forwardedRef,
+        children
+      })
+    });
   }
 );
 if (process.env.NODE_ENV !== "production") {