@liveblocks/react-ui 3.15.0 → 3.15.1-rc1

package/dist/_private/index.cjs

@@ -57,6 +57,7 @@ var ListOrdered = require('../icons/ListOrdered.cjs');
 var ListUnordered = require('../icons/ListUnordered.cjs');
 var Mention = require('../icons/Mention.cjs');
 var MinusCircle = require('../icons/MinusCircle.cjs');
+var Plus = require('../icons/Plus.cjs');
 var QuestionMark = require('../icons/QuestionMark.cjs');
 var Redo = require('../icons/Redo.cjs');
 var Restore = require('../icons/Restore.cjs');
@@ -138,6 +139,7 @@ exports.ListOrderedIcon = ListOrdered.ListOrderedIcon;
 exports.ListUnorderedIcon = ListUnordered.ListUnorderedIcon;
 exports.MentionIcon = Mention.MentionIcon;
 exports.MinusCircleIcon = MinusCircle.MinusCircleIcon;
+exports.PlusIcon = Plus.PlusIcon;
 exports.QuestionMarkIcon = QuestionMark.QuestionMarkIcon;
 exports.RedoIcon = Redo.RedoIcon;
 exports.RestoreIcon = Restore.RestoreIcon;

package/dist/_private/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_private/index.d.cts

@@ -447,6 +447,8 @@ declare function MentionIcon(props: ComponentProps<"svg">): react_jsx_runtime.JS
 
 declare function MinusCircleIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function PlusIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
 declare function QuestionMarkIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function RedoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -724,4 +726,4 @@ declare namespace index {
   };
 }
 
-export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };
+export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, PlusIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };

package/dist/_private/index.d.ts

@@ -447,6 +447,8 @@ declare function MentionIcon(props: ComponentProps<"svg">): react_jsx_runtime.JS
 
 declare function MinusCircleIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
+declare function PlusIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
 declare function QuestionMarkIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function RedoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -724,4 +726,4 @@ declare namespace index {
   };
 }
 
-export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };
+export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, PlusIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs, useStableComponent };

package/dist/_private/index.js

@@ -58,6 +58,7 @@ export { ListOrderedIcon } from '../icons/ListOrdered.js';
 export { ListUnorderedIcon } from '../icons/ListUnordered.js';
 export { MentionIcon } from '../icons/Mention.js';
 export { MinusCircleIcon } from '../icons/MinusCircle.js';
+export { PlusIcon } from '../icons/Plus.js';
 export { QuestionMarkIcon } from '../icons/QuestionMark.js';
 export { RedoIcon } from '../icons/Redo.js';
 export { RestoreIcon } from '../icons/Restore.js';

package/dist/_private/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/AvatarStack.cjs

@@ -7,6 +7,7 @@ var react = require('react');
 var constants = require('../constants.cjs');
 var overrides = require('../overrides.cjs');
 var cn = require('../utils/cn.cjs');
+var px = require('../utils/px.cjs');
 var Avatar = require('./internal/Avatar.cjs');
 var Tooltip = require('./internal/Tooltip.cjs');
 var User = require('./internal/User.cjs');
@@ -23,7 +24,9 @@ const AvatarStack = react.forwardRef(
     ...props
   }, forwardedRef) => {
     const $ = overrides.useOverrides(overrides$1);
-    const otherIds = react$1.useOthers((others) => others.map((user) => user.id));
+    const otherIds = react$1.useOthers(
+      (others) => [...others].sort((a, b) => b.connectionId - a.connectionId).map((user) => user.id).filter((userId) => userId !== void 0)
+    );
     const selfId = react$1.useSelf((self) => self.id);
     const userIds = react.useMemo(() => {
       const uniqueUserIds = /* @__PURE__ */ new Set([
@@ -33,8 +36,10 @@ const AvatarStack = react.forwardRef(
       ]);
       return [...uniqueUserIds];
     }, [selfId, otherIds, additionalUserIds]);
-    const maxAvatars = Math.max(1, Math.floor(max));
-    const visibleUserIds = userIds.slice(0, maxAvatars);
+    const maxItems = Math.max(2, Math.floor(max));
+    const shouldShowMore = userIds.length > maxItems;
+    const visibleAvatarsCount = shouldShowMore ? maxItems - 1 : maxItems;
+    const visibleUserIds = userIds.slice(0, visibleAvatarsCount);
     const hiddenUserIds = userIds.slice(visibleUserIds.length);
     const remainingUsersCount = hiddenUserIds.length;
     const visibleItemsCount = visibleUserIds.length + Number(remainingUsersCount > 0);
@@ -47,8 +52,8 @@ const AvatarStack = react.forwardRef(
         className: cn.cn("lb-root lb-avatar-stack", className),
         dir: $.dir,
         style: {
-          "--lb-avatar-stack-count": visibleItemsCount - 1,
-          "--lb-avatar-stack-size": size,
+          "--lb-avatar-stack-count": visibleItemsCount,
+          "--lb-avatar-stack-size": px.px(size),
           ...style
         },
         ...props,

package/dist/components/AvatarStack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStack.cjs","sources":["../../src/components/AvatarStack.tsx"],"sourcesContent":["\"use client\";\n\nimport { useOthers, useSelf } from \"@liveblocks/react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport type { GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nexport interface AvatarStackProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Optional additional user IDs to include in the stack.\n   */\n  userIds?: string[];\n\n  /**\n   * The maximum number of visible avatars.\n   * Defaults to 3, set to `undefined` to show all avatars.\n   */\n  max?: number;\n\n  /**\n   * The size of the avatars.\n   */\n  size?: string | number;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides>;\n}\n\n/**\n * Displays a stack of avatars for the users currently present in the room.\n */\nexport const AvatarStack = forwardRef<HTMLDivElement, AvatarStackProps>(\n  (\n    {\n      userIds: additionalUserIds = [],\n      max = 3,\n      size,\n      overrides,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const otherIds = useOthers((others) => others.map((user) => user.id));\n    const selfId = useSelf((self) => self.id);\n    const userIds = useMemo(() => {\n      const uniqueUserIds = new Set([\n        selfId,\n        ...otherIds,\n        ...additionalUserIds,\n      ]);\n\n      return [...uniqueUserIds];\n    }, [selfId, otherIds, additionalUserIds]);\n    const maxAvatars = Math.max(1, Math.floor(max));\n    const visibleUserIds = userIds.slice(0, maxAvatars);\n    const hiddenUserIds = userIds.slice(visibleUserIds.length);\n    const remainingUsersCount = hiddenUserIds.length;\n    const visibleItemsCount =\n      visibleUserIds.length + Number(remainingUsersCount > 0);\n\n    if (userIds.length === 0) {\n      return null;\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\"lb-root lb-avatar-stack\", className)}\n          dir={$.dir}\n          style={\n            {\n              \"--lb-avatar-stack-count\": visibleItemsCount - 1,\n              \"--lb-avatar-stack-size\": size,\n              ...style,\n            } as CSSProperties\n          }\n          {...props}\n          ref={forwardedRef}\n        >\n          {visibleUserIds.map((userId, index) => {\n            if (!userId) {\n              return null;\n            }\n\n            return (\n              <Tooltip\n                key={userId}\n                content={<User userId={userId} />}\n                sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n                collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n                side=\"top\"\n                align=\"center\"\n              >\n                <Avatar\n                  userId={userId}\n                  className=\"lb-avatar-stack-avatar\"\n                  style={{ \"--lb-avatar-stack-index\": index } as CSSProperties}\n                />\n              </Tooltip>\n            );\n          })}\n          {remainingUsersCount > 0 ? (\n            <Tooltip\n              content={\n                <ul className=\"lb-users-tooltip-list\">\n                  {hiddenUserIds.map((userId) =>\n                    userId ? (\n                      <li key={userId} className=\"lb-users-tooltip-list-item\">\n                        <Avatar userId={userId} />\n                        <User userId={userId} />\n                      </li>\n                    ) : null\n                  )}\n                </ul>\n              }\n              sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n              collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n              side=\"top\"\n              align=\"center\"\n              className=\"lb-users-tooltip\"\n            >\n              <div\n                className=\"lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more\"\n                style={\n                  {\n                    \"--lb-avatar-stack-index\": visibleUserIds.length,\n                  } as CSSProperties\n                }\n              >\n                <span className=\"lb-avatar-fallback\">\n                  +{remainingUsersCount}\n                </span>\n              </div>\n            </Tooltip>\n          ) : null}\n        </div>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA2CO;AAAoB;AAEvB;AACgC;AACxB;AACN;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACE;AAA8B;AAC5B;AACG;AACA;AAGL;AAAwB;AAE1B;AACA;AACA;AACA;AACA;AAGA;AACE;AAAO;AAGT;AAEI;AAAC;AAAA;AACmD;AAC3C;AAEL;AACiD;AACrB;AACvB;AACL;AAEE;AACC;AAEJ;AACC;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AAEgC;AACnB;AACM;AACb;AACC;AAEN;AAAC;AAAA;AACC;AACU;AACgC;AAAA;AAC5C;AAAA;AAXK;AAYP;AAEH;AAEC;AAAC;AAAA;AAGoB;AAGT;AAAwB;AACF;AAEtB;AAER;AAEU;AACM;AACb;AACC;AACI;AAEV;AAAC;AAAA;AACW;AAER;AAC4C;AAC5C;AAGmC;AAAA;AACjC;AACJ;AAAA;AACF;AAAA;AAEA;AAAA;AAAA;AAER;AAGN;;"}
+{"version":3,"file":"AvatarStack.cjs","sources":["../../src/components/AvatarStack.tsx"],"sourcesContent":["\"use client\";\n\nimport { useOthers, useSelf } from \"@liveblocks/react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport type { GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { px } from \"../utils/px\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nexport interface AvatarStackProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Optional additional user IDs to include in the stack.\n   */\n  userIds?: string[];\n\n  /**\n   * The maximum number of items in the stack (at least 2).\n   * Defaults to 3, set to `undefined` to show all avatars.\n   */\n  max?: number;\n\n  /**\n   * The size of the avatars.\n   */\n  size?: string | number;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides>;\n}\n\n/**\n * Displays a stack of avatars for the users currently present in the room.\n */\nexport const AvatarStack = forwardRef<HTMLDivElement, AvatarStackProps>(\n  (\n    {\n      userIds: additionalUserIds = [],\n      max = 3,\n      size,\n      overrides,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const otherIds = useOthers((others) =>\n      [...others]\n        .sort((a, b) => b.connectionId - a.connectionId)\n        .map((user) => user.id)\n        .filter((userId): userId is string => userId !== undefined)\n    );\n    const selfId = useSelf((self) => self.id);\n    const userIds = useMemo(() => {\n      const uniqueUserIds = new Set([\n        selfId,\n        ...otherIds,\n        ...additionalUserIds,\n      ]);\n\n      return [...uniqueUserIds];\n    }, [selfId, otherIds, additionalUserIds]);\n    const maxItems = Math.max(2, Math.floor(max));\n    const shouldShowMore = userIds.length > maxItems;\n    const visibleAvatarsCount = shouldShowMore ? maxItems - 1 : maxItems;\n    const visibleUserIds = userIds.slice(0, visibleAvatarsCount);\n    const hiddenUserIds = userIds.slice(visibleUserIds.length);\n    const remainingUsersCount = hiddenUserIds.length;\n    const visibleItemsCount =\n      visibleUserIds.length + Number(remainingUsersCount > 0);\n\n    if (userIds.length === 0) {\n      return null;\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\"lb-root lb-avatar-stack\", className)}\n          dir={$.dir}\n          style={\n            {\n              \"--lb-avatar-stack-count\": visibleItemsCount,\n              \"--lb-avatar-stack-size\": px(size),\n              ...style,\n            } as CSSProperties\n          }\n          {...props}\n          ref={forwardedRef}\n        >\n          {visibleUserIds.map((userId, index) => {\n            if (!userId) {\n              return null;\n            }\n\n            return (\n              <Tooltip\n                key={userId}\n                content={<User userId={userId} />}\n                sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n                collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n                side=\"top\"\n                align=\"center\"\n              >\n                <Avatar\n                  userId={userId}\n                  className=\"lb-avatar-stack-avatar\"\n                  style={{ \"--lb-avatar-stack-index\": index } as CSSProperties}\n                />\n              </Tooltip>\n            );\n          })}\n          {remainingUsersCount > 0 ? (\n            <Tooltip\n              content={\n                <ul className=\"lb-users-tooltip-list\">\n                  {hiddenUserIds.map((userId) =>\n                    userId ? (\n                      <li key={userId} className=\"lb-users-tooltip-list-item\">\n                        <Avatar userId={userId} />\n                        <User userId={userId} />\n                      </li>\n                    ) : null\n                  )}\n                </ul>\n              }\n              sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n              collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n              side=\"top\"\n              align=\"center\"\n              className=\"lb-users-tooltip\"\n            >\n              <div\n                className=\"lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more\"\n                style={\n                  {\n                    \"--lb-avatar-stack-index\": visibleUserIds.length,\n                  } as CSSProperties\n                }\n              >\n                <span className=\"lb-avatar-fallback\">\n                  +{remainingUsersCount}\n                </span>\n              </div>\n            </Tooltip>\n          ) : null}\n        </div>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA4CO;AAAoB;AAEvB;AACgC;AACxB;AACN;AACA;AACA;AACA;AACG;AAIL;AACA;AAAiB;AAI6C;AAE9D;AACA;AACE;AAA8B;AAC5B;AACG;AACA;AAGL;AAAwB;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACE;AAAO;AAGT;AAEI;AAAC;AAAA;AACmD;AAC3C;AAEL;AAC6B;AACM;AAC9B;AACL;AAEE;AACC;AAEJ;AACC;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AAEgC;AACnB;AACM;AACb;AACC;AAEN;AAAC;AAAA;AACC;AACU;AACgC;AAAA;AAC5C;AAAA;AAXK;AAYP;AAEH;AAEC;AAAC;AAAA;AAGoB;AAGT;AAAwB;AACF;AAEtB;AAER;AAEU;AACM;AACb;AACC;AACI;AAEV;AAAC;AAAA;AACW;AAER;AAC4C;AAC5C;AAGmC;AAAA;AACjC;AACJ;AAAA;AACF;AAAA;AAEA;AAAA;AAAA;AAER;AAGN;;"}

package/dist/components/AvatarStack.js

@@ -5,6 +5,7 @@ import { forwardRef, useMemo } from 'react';
 import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../constants.js';
 import { useOverrides } from '../overrides.js';
 import { cn } from '../utils/cn.js';
+import { px } from '../utils/px.js';
 import { Avatar } from './internal/Avatar.js';
 import { TooltipProvider, Tooltip } from './internal/Tooltip.js';
 import { User } from './internal/User.js';
@@ -21,7 +22,9 @@ const AvatarStack = forwardRef(
     ...props
   }, forwardedRef) => {
     const $ = useOverrides(overrides);
-    const otherIds = useOthers((others) => others.map((user) => user.id));
+    const otherIds = useOthers(
+      (others) => [...others].sort((a, b) => b.connectionId - a.connectionId).map((user) => user.id).filter((userId) => userId !== void 0)
+    );
     const selfId = useSelf((self) => self.id);
     const userIds = useMemo(() => {
       const uniqueUserIds = /* @__PURE__ */ new Set([
@@ -31,8 +34,10 @@ const AvatarStack = forwardRef(
       ]);
       return [...uniqueUserIds];
     }, [selfId, otherIds, additionalUserIds]);
-    const maxAvatars = Math.max(1, Math.floor(max));
-    const visibleUserIds = userIds.slice(0, maxAvatars);
+    const maxItems = Math.max(2, Math.floor(max));
+    const shouldShowMore = userIds.length > maxItems;
+    const visibleAvatarsCount = shouldShowMore ? maxItems - 1 : maxItems;
+    const visibleUserIds = userIds.slice(0, visibleAvatarsCount);
     const hiddenUserIds = userIds.slice(visibleUserIds.length);
     const remainingUsersCount = hiddenUserIds.length;
     const visibleItemsCount = visibleUserIds.length + Number(remainingUsersCount > 0);
@@ -45,8 +50,8 @@ const AvatarStack = forwardRef(
         className: cn("lb-root lb-avatar-stack", className),
         dir: $.dir,
         style: {
-          "--lb-avatar-stack-count": visibleItemsCount - 1,
-          "--lb-avatar-stack-size": size,
+          "--lb-avatar-stack-count": visibleItemsCount,
+          "--lb-avatar-stack-size": px(size),
           ...style
         },
         ...props,

package/dist/components/AvatarStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStack.js","sources":["../../src/components/AvatarStack.tsx"],"sourcesContent":["\"use client\";\n\nimport { useOthers, useSelf } from \"@liveblocks/react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport type { GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nexport interface AvatarStackProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Optional additional user IDs to include in the stack.\n   */\n  userIds?: string[];\n\n  /**\n   * The maximum number of visible avatars.\n   * Defaults to 3, set to `undefined` to show all avatars.\n   */\n  max?: number;\n\n  /**\n   * The size of the avatars.\n   */\n  size?: string | number;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides>;\n}\n\n/**\n * Displays a stack of avatars for the users currently present in the room.\n */\nexport const AvatarStack = forwardRef<HTMLDivElement, AvatarStackProps>(\n  (\n    {\n      userIds: additionalUserIds = [],\n      max = 3,\n      size,\n      overrides,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const otherIds = useOthers((others) => others.map((user) => user.id));\n    const selfId = useSelf((self) => self.id);\n    const userIds = useMemo(() => {\n      const uniqueUserIds = new Set([\n        selfId,\n        ...otherIds,\n        ...additionalUserIds,\n      ]);\n\n      return [...uniqueUserIds];\n    }, [selfId, otherIds, additionalUserIds]);\n    const maxAvatars = Math.max(1, Math.floor(max));\n    const visibleUserIds = userIds.slice(0, maxAvatars);\n    const hiddenUserIds = userIds.slice(visibleUserIds.length);\n    const remainingUsersCount = hiddenUserIds.length;\n    const visibleItemsCount =\n      visibleUserIds.length + Number(remainingUsersCount > 0);\n\n    if (userIds.length === 0) {\n      return null;\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\"lb-root lb-avatar-stack\", className)}\n          dir={$.dir}\n          style={\n            {\n              \"--lb-avatar-stack-count\": visibleItemsCount - 1,\n              \"--lb-avatar-stack-size\": size,\n              ...style,\n            } as CSSProperties\n          }\n          {...props}\n          ref={forwardedRef}\n        >\n          {visibleUserIds.map((userId, index) => {\n            if (!userId) {\n              return null;\n            }\n\n            return (\n              <Tooltip\n                key={userId}\n                content={<User userId={userId} />}\n                sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n                collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n                side=\"top\"\n                align=\"center\"\n              >\n                <Avatar\n                  userId={userId}\n                  className=\"lb-avatar-stack-avatar\"\n                  style={{ \"--lb-avatar-stack-index\": index } as CSSProperties}\n                />\n              </Tooltip>\n            );\n          })}\n          {remainingUsersCount > 0 ? (\n            <Tooltip\n              content={\n                <ul className=\"lb-users-tooltip-list\">\n                  {hiddenUserIds.map((userId) =>\n                    userId ? (\n                      <li key={userId} className=\"lb-users-tooltip-list-item\">\n                        <Avatar userId={userId} />\n                        <User userId={userId} />\n                      </li>\n                    ) : null\n                  )}\n                </ul>\n              }\n              sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n              collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n              side=\"top\"\n              align=\"center\"\n              className=\"lb-users-tooltip\"\n            >\n              <div\n                className=\"lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more\"\n                style={\n                  {\n                    \"--lb-avatar-stack-index\": visibleUserIds.length,\n                  } as CSSProperties\n                }\n              >\n                <span className=\"lb-avatar-fallback\">\n                  +{remainingUsersCount}\n                </span>\n              </div>\n            </Tooltip>\n          ) : null}\n        </div>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;AA2CO;AAAoB;AAEvB;AACgC;AACxB;AACN;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACE;AAA8B;AAC5B;AACG;AACA;AAGL;AAAwB;AAE1B;AACA;AACA;AACA;AACA;AAGA;AACE;AAAO;AAGT;AAEI;AAAC;AAAA;AACmD;AAC3C;AAEL;AACiD;AACrB;AACvB;AACL;AAEE;AACC;AAEJ;AACC;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AAEgC;AACnB;AACM;AACb;AACC;AAEN;AAAC;AAAA;AACC;AACU;AACgC;AAAA;AAC5C;AAAA;AAXK;AAYP;AAEH;AAEC;AAAC;AAAA;AAGoB;AAGT;AAAwB;AACF;AAEtB;AAER;AAEU;AACM;AACb;AACC;AACI;AAEV;AAAC;AAAA;AACW;AAER;AAC4C;AAC5C;AAGmC;AAAA;AACjC;AACJ;AAAA;AACF;AAAA;AAEA;AAAA;AAAA;AAER;AAGN;;"}
+{"version":3,"file":"AvatarStack.js","sources":["../../src/components/AvatarStack.tsx"],"sourcesContent":["\"use client\";\n\nimport { useOthers, useSelf } from \"@liveblocks/react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport type { GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { px } from \"../utils/px\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nexport interface AvatarStackProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Optional additional user IDs to include in the stack.\n   */\n  userIds?: string[];\n\n  /**\n   * The maximum number of items in the stack (at least 2).\n   * Defaults to 3, set to `undefined` to show all avatars.\n   */\n  max?: number;\n\n  /**\n   * The size of the avatars.\n   */\n  size?: string | number;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides>;\n}\n\n/**\n * Displays a stack of avatars for the users currently present in the room.\n */\nexport const AvatarStack = forwardRef<HTMLDivElement, AvatarStackProps>(\n  (\n    {\n      userIds: additionalUserIds = [],\n      max = 3,\n      size,\n      overrides,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const otherIds = useOthers((others) =>\n      [...others]\n        .sort((a, b) => b.connectionId - a.connectionId)\n        .map((user) => user.id)\n        .filter((userId): userId is string => userId !== undefined)\n    );\n    const selfId = useSelf((self) => self.id);\n    const userIds = useMemo(() => {\n      const uniqueUserIds = new Set([\n        selfId,\n        ...otherIds,\n        ...additionalUserIds,\n      ]);\n\n      return [...uniqueUserIds];\n    }, [selfId, otherIds, additionalUserIds]);\n    const maxItems = Math.max(2, Math.floor(max));\n    const shouldShowMore = userIds.length > maxItems;\n    const visibleAvatarsCount = shouldShowMore ? maxItems - 1 : maxItems;\n    const visibleUserIds = userIds.slice(0, visibleAvatarsCount);\n    const hiddenUserIds = userIds.slice(visibleUserIds.length);\n    const remainingUsersCount = hiddenUserIds.length;\n    const visibleItemsCount =\n      visibleUserIds.length + Number(remainingUsersCount > 0);\n\n    if (userIds.length === 0) {\n      return null;\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\"lb-root lb-avatar-stack\", className)}\n          dir={$.dir}\n          style={\n            {\n              \"--lb-avatar-stack-count\": visibleItemsCount,\n              \"--lb-avatar-stack-size\": px(size),\n              ...style,\n            } as CSSProperties\n          }\n          {...props}\n          ref={forwardedRef}\n        >\n          {visibleUserIds.map((userId, index) => {\n            if (!userId) {\n              return null;\n            }\n\n            return (\n              <Tooltip\n                key={userId}\n                content={<User userId={userId} />}\n                sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n                collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n                side=\"top\"\n                align=\"center\"\n              >\n                <Avatar\n                  userId={userId}\n                  className=\"lb-avatar-stack-avatar\"\n                  style={{ \"--lb-avatar-stack-index\": index } as CSSProperties}\n                />\n              </Tooltip>\n            );\n          })}\n          {remainingUsersCount > 0 ? (\n            <Tooltip\n              content={\n                <ul className=\"lb-users-tooltip-list\">\n                  {hiddenUserIds.map((userId) =>\n                    userId ? (\n                      <li key={userId} className=\"lb-users-tooltip-list-item\">\n                        <Avatar userId={userId} />\n                        <User userId={userId} />\n                      </li>\n                    ) : null\n                  )}\n                </ul>\n              }\n              sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n              collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n              side=\"top\"\n              align=\"center\"\n              className=\"lb-users-tooltip\"\n            >\n              <div\n                className=\"lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more\"\n                style={\n                  {\n                    \"--lb-avatar-stack-index\": visibleUserIds.length,\n                  } as CSSProperties\n                }\n              >\n                <span className=\"lb-avatar-fallback\">\n                  +{remainingUsersCount}\n                </span>\n              </div>\n            </Tooltip>\n          ) : null}\n        </div>\n      </TooltipProvider>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AA4CO;AAAoB;AAEvB;AACgC;AACxB;AACN;AACA;AACA;AACA;AACG;AAIL;AACA;AAAiB;AAI6C;AAE9D;AACA;AACE;AAA8B;AAC5B;AACG;AACA;AAGL;AAAwB;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACE;AAAO;AAGT;AAEI;AAAC;AAAA;AACmD;AAC3C;AAEL;AAC6B;AACM;AAC9B;AACL;AAEE;AACC;AAEJ;AACC;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AAEgC;AACnB;AACM;AACb;AACC;AAEN;AAAC;AAAA;AACC;AACU;AACgC;AAAA;AAC5C;AAAA;AAXK;AAYP;AAEH;AAEC;AAAC;AAAA;AAGoB;AAGT;AAAwB;AACF;AAEtB;AAER;AAEU;AACM;AACb;AACC;AACI;AAEV;AAAC;AAAA;AACW;AAER;AAC4C;AAC5C;AAGmC;AAAA;AACjC;AACJ;AAAA;AACF;AAAA;AAEA;AAAA;AAAA;AAER;AAGN;;"}

package/dist/components/CommentPin.cjs

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var cn = require('../utils/cn.cjs');
+var px = require('../utils/px.cjs');
 var Avatar = require('./internal/Avatar.cjs');
 
 
@@ -15,6 +16,7 @@ const CommentPin = react.forwardRef(
     type = "button",
     className,
     style,
+    children,
     ...props
   }, forwardedRef) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -22,11 +24,11 @@ const CommentPin = react.forwardRef(
       {
         className: cn.cn("lb-root lb-comment-pin", className),
         "data-corner": corner,
-        style: { "--lb-comment-pin-size": size, ...style },
+        style: { "--lb-comment-pin-size": px.px(size), ...style },
         type,
         ...props,
         ref: forwardedRef,
-        children: userId ? /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { className: "lb-comment-pin-avatar", userId }) : null
+        children: children ?? (userId ? /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { className: "lb-comment-pin-avatar", userId }) : null)
       }
     );
   }

package/dist/components/CommentPin.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommentPin.cjs","sources":["../../src/components/CommentPin.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { Avatar } from \"./internal/Avatar\";\n\nexport interface CommentPinProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The corner that points to the comment position.\n   * Defaults to the bottom left corner.\n   */\n  corner?: \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\n  /**\n   * The user ID to optionally display an avatar for.\n   */\n  userId?: string;\n\n  /**\n   * The size of the pin.\n   */\n  size?: string | number;\n}\n\n/**\n * Displays a comment pin that can be used as a trigger\n * for `FloatingComposer` and `FloatingThread`.\n */\nexport const CommentPin = forwardRef<HTMLButtonElement, CommentPinProps>(\n  (\n    {\n      corner = \"bottom-left\",\n      userId,\n      size,\n      type = \"button\",\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        className={cn(\"lb-root lb-comment-pin\", className)}\n        data-corner={corner}\n        style={{ \"--lb-comment-pin-size\": size, ...style } as CSSProperties}\n        type={type}\n        {...props}\n        ref={forwardedRef}\n      >\n        {userId ? (\n          <Avatar className=\"lb-comment-pin-avatar\" userId={userId} />\n        ) : null}\n      </button>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;AA8BO;AAAmB;AAEtB;AACW;AACT;AACA;AACO;AACP;AACA;AACG;AAIL;AACE;AAAC;AAAA;AACkD;AACpC;AACoC;AACjD;AACI;AACC;AAID;AAAA;AACN;AAGN;;"}
+{"version":3,"file":"CommentPin.cjs","sources":["../../src/components/CommentPin.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { px } from \"../utils/px\";\nimport { Avatar } from \"./internal/Avatar\";\n\nexport interface CommentPinProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The corner that points to the comment position.\n   * Defaults to the bottom left corner.\n   */\n  corner?: \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\n  /**\n   * The user ID to optionally display an avatar for.\n   */\n  userId?: string;\n\n  /**\n   * The size of the pin.\n   */\n  size?: string | number;\n\n  /**\n   * The content shown in the pin.\n   * If provided, the `userId` prop is ignored.\n   */\n  children?: ReactNode;\n}\n\n/**\n * Displays a comment pin that can be used as a trigger\n * for `FloatingComposer` and `FloatingThread`.\n */\nexport const CommentPin = forwardRef<HTMLButtonElement, CommentPinProps>(\n  (\n    {\n      corner = \"bottom-left\",\n      userId,\n      size,\n      type = \"button\",\n      className,\n      style,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        className={cn(\"lb-root lb-comment-pin\", className)}\n        data-corner={corner}\n        style={{ \"--lb-comment-pin-size\": px(size), ...style } as CSSProperties}\n        type={type}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children ??\n          (userId ? (\n            <Avatar className=\"lb-comment-pin-avatar\" userId={userId} />\n          ) : null)}\n      </button>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AAqCO;AAAmB;AAEtB;AACW;AACT;AACA;AACO;AACP;AACA;AACA;AACG;AAIL;AACE;AAAC;AAAA;AACkD;AACpC;AACwC;AACrD;AACI;AACC;AAKC;AAAA;AACR;AAGN;;"}

package/dist/components/CommentPin.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../utils/cn.js';
+import { px } from '../utils/px.js';
 import { Avatar } from './internal/Avatar.js';
 
 
@@ -13,6 +14,7 @@ const CommentPin = forwardRef(
     type = "button",
     className,
     style,
+    children,
     ...props
   }, forwardedRef) => {
     return /* @__PURE__ */ jsx(
@@ -20,11 +22,11 @@ const CommentPin = forwardRef(
       {
         className: cn("lb-root lb-comment-pin", className),
         "data-corner": corner,
-        style: { "--lb-comment-pin-size": size, ...style },
+        style: { "--lb-comment-pin-size": px(size), ...style },
         type,
         ...props,
         ref: forwardedRef,
-        children: userId ? /* @__PURE__ */ jsx(Avatar, { className: "lb-comment-pin-avatar", userId }) : null
+        children: children ?? (userId ? /* @__PURE__ */ jsx(Avatar, { className: "lb-comment-pin-avatar", userId }) : null)
       }
     );
   }

package/dist/components/CommentPin.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentPin.js","sources":["../../src/components/CommentPin.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { Avatar } from \"./internal/Avatar\";\n\nexport interface CommentPinProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The corner that points to the comment position.\n   * Defaults to the bottom left corner.\n   */\n  corner?: \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\n  /**\n   * The user ID to optionally display an avatar for.\n   */\n  userId?: string;\n\n  /**\n   * The size of the pin.\n   */\n  size?: string | number;\n}\n\n/**\n * Displays a comment pin that can be used as a trigger\n * for `FloatingComposer` and `FloatingThread`.\n */\nexport const CommentPin = forwardRef<HTMLButtonElement, CommentPinProps>(\n  (\n    {\n      corner = \"bottom-left\",\n      userId,\n      size,\n      type = \"button\",\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        className={cn(\"lb-root lb-comment-pin\", className)}\n        data-corner={corner}\n        style={{ \"--lb-comment-pin-size\": size, ...style } as CSSProperties}\n        type={type}\n        {...props}\n        ref={forwardedRef}\n      >\n        {userId ? (\n          <Avatar className=\"lb-comment-pin-avatar\" userId={userId} />\n        ) : null}\n      </button>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AA8BO;AAAmB;AAEtB;AACW;AACT;AACA;AACO;AACP;AACA;AACG;AAIL;AACE;AAAC;AAAA;AACkD;AACpC;AACoC;AACjD;AACI;AACC;AAID;AAAA;AACN;AAGN;;"}
+{"version":3,"file":"CommentPin.js","sources":["../../src/components/CommentPin.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { px } from \"../utils/px\";\nimport { Avatar } from \"./internal/Avatar\";\n\nexport interface CommentPinProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The corner that points to the comment position.\n   * Defaults to the bottom left corner.\n   */\n  corner?: \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\n  /**\n   * The user ID to optionally display an avatar for.\n   */\n  userId?: string;\n\n  /**\n   * The size of the pin.\n   */\n  size?: string | number;\n\n  /**\n   * The content shown in the pin.\n   * If provided, the `userId` prop is ignored.\n   */\n  children?: ReactNode;\n}\n\n/**\n * Displays a comment pin that can be used as a trigger\n * for `FloatingComposer` and `FloatingThread`.\n */\nexport const CommentPin = forwardRef<HTMLButtonElement, CommentPinProps>(\n  (\n    {\n      corner = \"bottom-left\",\n      userId,\n      size,\n      type = \"button\",\n      className,\n      style,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        className={cn(\"lb-root lb-comment-pin\", className)}\n        data-corner={corner}\n        style={{ \"--lb-comment-pin-size\": px(size), ...style } as CSSProperties}\n        type={type}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children ??\n          (userId ? (\n            <Avatar className=\"lb-comment-pin-avatar\" userId={userId} />\n          ) : null)}\n      </button>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AAqCO;AAAmB;AAEtB;AACW;AACT;AACA;AACO;AACP;AACA;AACA;AACG;AAIL;AACE;AAAC;AAAA;AACkD;AACpC;AACwC;AACrD;AACI;AACC;AAKC;AAAA;AACR;AAGN;;"}

package/dist/components/FloatingComposer.cjs

@@ -22,10 +22,12 @@ const FloatingComposer = react.forwardRef(
     sideOffset = constants.FLOATING_ELEMENT_SIDE_OFFSET,
     align = "start",
     alignOffset,
+    autoFocus = true,
     overrides: overrides$1,
     className,
     ...props
   }, forwardedRef) => {
+    const ref = react.useRef(null);
     const $ = overrides.useOverrides(overrides$1);
     const { portalContainer } = config.useLiveblocksUiConfig();
     const [isOpen, setIsOpen] = useControllableState.useControllableState(
@@ -33,6 +35,11 @@ const FloatingComposer = react.forwardRef(
       open,
       onOpenChange
     );
+    react.useImperativeHandle(
+      forwardedRef,
+      () => ref.current,
+      []
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { asChild: true, children }),
       /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -45,6 +52,7 @@ const FloatingComposer = react.forwardRef(
           dir: $.dir,
           side,
           sideOffset,
+          updatePositionStrategy: "always",
           align,
           alignOffset,
           collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
@@ -61,14 +69,21 @@ const FloatingComposer = react.forwardRef(
               event.preventDefault();
             }
           },
+          onOpenAutoFocus: (event) => {
+            if (!autoFocus) {
+              event.preventDefault();
+              ref.current?.focus();
+            }
+          },
           asChild: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             Composer.Composer,
             {
-              ref: forwardedRef,
+              ref,
               overrides: overrides$1,
-              autoFocus: true,
+              autoFocus,
               collapsed: false,
+              tabIndex: -1,
               ...props
             }
           )

package/dist/components/FloatingComposer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingComposer.cjs","sources":["../../src/components/FloatingComposer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\n\nexport interface FloatingComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends Omit<\n      ComposerProps<TM, CM>,\n      \"collapsed\" | \"onCollapsedChange\" | \"defaultCollapsed\"\n    >,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating composer.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating composer attached to a trigger element.\n */\nexport const FloatingComposer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-composer\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Composer\n              ref={forwardedRef}\n              overrides={overrides}\n              autoFocus\n              collapsed={false}\n              {...(props as ComposerProps<TM, CM>)}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAgDO;AAAyB;AAE5B;AACE;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACA;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACS;AACE;AACN;AAAA;AACP;AAAA;AAEJ;AACF;AAGN;;"}
+{"version":3,"file":"FloatingComposer.cjs","sources":["../../src/components/FloatingComposer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\n\nexport interface FloatingComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends Omit<\n      ComposerProps<TM, CM>,\n      \"collapsed\" | \"onCollapsedChange\" | \"defaultCollapsed\"\n    >,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating composer.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating composer attached to a trigger element.\n */\nexport const FloatingComposer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      autoFocus = true,\n      overrides,\n      className,\n      ...props\n    }: FloatingComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const ref = useRef<HTMLFormElement>(null);\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    useImperativeHandle<HTMLFormElement | null, HTMLFormElement | null>(\n      forwardedRef,\n      () => ref.current,\n      []\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-composer\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            onOpenAutoFocus={(event) => {\n              if (!autoFocus) {\n                event.preventDefault();\n                ref.current?.focus();\n              }\n            }}\n            asChild\n          >\n            <Composer\n              ref={ref}\n              overrides={overrides}\n              autoFocus={autoFocus}\n              collapsed={false}\n              tabIndex={-1}\n              {...(props as ComposerProps<TM, CM>)}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkDO;AAAyB;AAE5B;AACE;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACY;AACZ;AACA;AACG;AAIL;AACA;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAAA;AACE;AACU;AACT;AAGH;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AAEE;AACE;AACA;AAAmB;AACrB;AACF;AACO;AAEP;AAAC;AAAA;AACC;AACA;AACA;AACW;AACD;AACL;AAAA;AACP;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/FloatingComposer.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover } from 'radix-ui';
-import { forwardRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useLiveblocksUiConfig } from '../config.js';
 import { FLOATING_ELEMENT_COLLISION_PADDING, FLOATING_ELEMENT_SIDE_OFFSET } from '../constants.js';
 import { useOverrides } from '../overrides.js';
@@ -20,10 +20,12 @@ const FloatingComposer = forwardRef(
     sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,
     align = "start",
     alignOffset,
+    autoFocus = true,
     overrides,
     className,
     ...props
   }, forwardedRef) => {
+    const ref = useRef(null);
     const $ = useOverrides(overrides);
     const { portalContainer } = useLiveblocksUiConfig();
     const [isOpen, setIsOpen] = useControllableState(
@@ -31,6 +33,11 @@ const FloatingComposer = forwardRef(
       open,
       onOpenChange
     );
+    useImperativeHandle(
+      forwardedRef,
+      () => ref.current,
+      []
+    );
     return /* @__PURE__ */ jsxs(Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
       /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
       /* @__PURE__ */ jsx(Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
@@ -43,6 +50,7 @@ const FloatingComposer = forwardRef(
           dir: $.dir,
           side,
           sideOffset,
+          updatePositionStrategy: "always",
           align,
           alignOffset,
           collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
@@ -59,14 +67,21 @@ const FloatingComposer = forwardRef(
               event.preventDefault();
             }
           },
+          onOpenAutoFocus: (event) => {
+            if (!autoFocus) {
+              event.preventDefault();
+              ref.current?.focus();
+            }
+          },
           asChild: true,
           children: /* @__PURE__ */ jsx(
             Composer,
             {
-              ref: forwardedRef,
+              ref,
               overrides,
-              autoFocus: true,
+              autoFocus,
               collapsed: false,
+              tabIndex: -1,
               ...props
             }
           )

package/dist/components/FloatingComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingComposer.js","sources":["../../src/components/FloatingComposer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\n\nexport interface FloatingComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends Omit<\n      ComposerProps<TM, CM>,\n      \"collapsed\" | \"onCollapsedChange\" | \"defaultCollapsed\"\n    >,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating composer.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating composer attached to a trigger element.\n */\nexport const FloatingComposer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-composer\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Composer\n              ref={forwardedRef}\n              overrides={overrides}\n              autoFocus\n              collapsed={false}\n              {...(props as ComposerProps<TM, CM>)}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;AAgDO;AAAyB;AAE5B;AACE;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACA;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACS;AACE;AACN;AAAA;AACP;AAAA;AAEJ;AACF;AAGN;;"}
+{"version":3,"file":"FloatingComposer.js","sources":["../../src/components/FloatingComposer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\n\nexport interface FloatingComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends Omit<\n      ComposerProps<TM, CM>,\n      \"collapsed\" | \"onCollapsedChange\" | \"defaultCollapsed\"\n    >,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating composer.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating composer attached to a trigger element.\n */\nexport const FloatingComposer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      autoFocus = true,\n      overrides,\n      className,\n      ...props\n    }: FloatingComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const ref = useRef<HTMLFormElement>(null);\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    useImperativeHandle<HTMLFormElement | null, HTMLFormElement | null>(\n      forwardedRef,\n      () => ref.current,\n      []\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-composer\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            onOpenAutoFocus={(event) => {\n              if (!autoFocus) {\n                event.preventDefault();\n                ref.current?.focus();\n              }\n            }}\n            asChild\n          >\n            <Composer\n              ref={ref}\n              overrides={overrides}\n              autoFocus={autoFocus}\n              collapsed={false}\n              tabIndex={-1}\n              {...(props as ComposerProps<TM, CM>)}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;AAkDO;AAAyB;AAE5B;AACE;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACY;AACZ;AACA;AACG;AAIL;AACA;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAAA;AACE;AACU;AACT;AAGH;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AAEE;AACE;AACA;AAAmB;AACrB;AACF;AACO;AAEP;AAAC;AAAA;AACC;AACA;AACA;AACW;AACD;AACL;AAAA;AACP;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/FloatingThread.cjs

@@ -46,6 +46,7 @@ const FloatingThread = react.forwardRef(
           dir: $.dir,
           side,
           sideOffset,
+          updatePositionStrategy: "always",
           align,
           alignOffset,
           collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,

package/dist/components/FloatingThread.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingThread.cjs","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA6CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACA;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}
+{"version":3,"file":"FloatingThread.cjs","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA6CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/FloatingThread.js

@@ -44,6 +44,7 @@ const FloatingThread = forwardRef(
           dir: $.dir,
           side,
           sideOffset,
+          updatePositionStrategy: "always",
           align,
           alignOffset,
           collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,

package/dist/components/FloatingThread.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingThread.js","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACA;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}
+{"version":3,"file":"FloatingThread.js","sources":["../../src/components/FloatingThread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DCM, DTM, Relax } from \"@liveblocks/core\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../constants\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport type { ThreadProps } from \"./Thread\";\nimport { Thread } from \"./Thread\";\n\nexport interface FloatingThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ThreadProps<TM, CM>,\n    Relax<\n      Pick<\n        PopoverPrimitive.PopoverProps,\n        \"defaultOpen\" | \"open\" | \"onOpenChange\"\n      > &\n        Pick<\n          PopoverPrimitive.PopoverContentProps,\n          \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n        >\n    > {\n  /**\n   * The element which opens the floating thread.\n   */\n  children: ReactNode;\n}\n\n/**\n * Displays a floating thread attached to a trigger element.\n */\nexport const FloatingThread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      children,\n      defaultOpen,\n      open,\n      onOpenChange,\n      side = \"right\",\n      sideOffset = FLOATING_ELEMENT_SIDE_OFFSET,\n      align = \"start\",\n      alignOffset,\n      overrides,\n      className,\n      ...props\n    }: FloatingThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const $ = useOverrides(overrides);\n    const { portalContainer } = useLiveblocksUiConfig();\n    const [isOpen, setIsOpen] = useControllableState(\n      defaultOpen ?? false,\n      open,\n      onOpenChange\n    );\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"lb-root lb-portal lb-elevation lb-floating-thread\",\n              className\n            )}\n            dir={$.dir}\n            side={side}\n            sideOffset={sideOffset}\n            updatePositionStrategy=\"always\"\n            align={align}\n            alignOffset={alignOffset}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            onEscapeKeyDown={(event) => {\n              if (event.defaultPrevented) {\n                return;\n              }\n\n              setIsOpen(false);\n\n              // Prevent further parent layers from closing\n              event.preventDefault();\n            }}\n            onInteractOutside={(event) => {\n              // Prevent closing when interacting with elements inside portals\n              // (e.g., emoji picker, dropdowns)\n              const target = event.target as HTMLElement;\n              if (target.closest(\".lb-portal\")) {\n                event.preventDefault();\n              }\n            }}\n            asChild\n          >\n            <Thread\n              ref={forwardedRef}\n              thread={thread}\n              overrides={overrides}\n              {...props}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6CO;AAAuB;AAE1B;AACE;AACA;AACA;AACA;AACA;AACO;AACM;AACL;AACR;AACA;AACA;AACG;AAIL;AACA;AACA;AAA4B;AACX;AACf;AACA;AAGF;AAEI;AAA4C;AAE1C;AAAkB;AAAjB;AACY;AACT;AACA;AACF;AACO;AACP;AACA;AACuB;AACvB;AACA;AACkB;AAEhB;AACE;AAAA;AAGF;AAGA;AAAqB;AACvB;AAIE;AACA;AACE;AAAqB;AACvB;AACF;AACO;AAEP;AAAC;AAAA;AACM;AACL;AACA;AACI;AAAA;AACN;AAAA;AAEJ;AACF;AAGN;;"}

package/dist/components/internal/Dropdown.cjs

@@ -39,6 +39,7 @@ function Dropdown({
             ),
             sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
             collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+            updatePositionStrategy: "always",
             ...props,
             children: content
           }

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUiConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={cn(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={cn(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport const DropdownTrigger = DropdownMenuPrimitive.Trigger;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAAuB;AAAtB;AACC;AACA;AACA;AACO;AAEN;AAAA;AAEC;AAAuB;AAAtB;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AAAA;AAEL;AAAA;AAAA;AAGN;AAEO;AAAqB;AAExB;AACE;AAAuB;AAAtB;AAC4C;AACvC;AACC;AAEJ;AAIG;AAGA;AAAA;AAAA;AACN;AAGN;AAEO;;;;"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUiConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={cn(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          updatePositionStrategy=\"always\"\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={cn(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport const DropdownTrigger = DropdownMenuPrimitive.Trigger;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAAuB;AAAtB;AACC;AACA;AACA;AACO;AAEN;AAAA;AAEC;AAAuB;AAAtB;AACY;AACT;AACA;AACF;AACY;AACM;AACK;AACnB;AAEH;AAAA;AAEL;AAAA;AAAA;AAGN;AAEO;AAAqB;AAExB;AACE;AAAuB;AAAtB;AAC4C;AACvC;AACC;AAEJ;AAIG;AAGA;AAAA;AAAA;AACN;AAGN;AAEO;;;;"}

package/dist/components/internal/Dropdown.js

@@ -37,6 +37,7 @@ function Dropdown({
             ),
             sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
             collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+            updatePositionStrategy: "always",
             ...props,
             children: content
           }