@liveblocks/react-ui 3.15.0-feeds1 → 3.15.0-rc1

package/dist/components/AvatarStack.cjs

@@ -0,0 +1,117 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@liveblocks/react');
+var react = require('react');
+var constants = require('../constants.cjs');
+var overrides = require('../overrides.cjs');
+var cn = require('../utils/cn.cjs');
+var Avatar = require('./internal/Avatar.cjs');
+var Tooltip = require('./internal/Tooltip.cjs');
+var User = require('./internal/User.cjs');
+
+
+const AvatarStack = react.forwardRef(
+  ({
+    userIds: additionalUserIds = [],
+    max = 3,
+    size,
+    overrides: overrides$1,
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    const $ = overrides.useOverrides(overrides$1);
+    const otherIds = react$1.useOthers((others) => others.map((user) => user.id));
+    const selfId = react$1.useSelf((self) => self.id);
+    const userIds = react.useMemo(() => {
+      const uniqueUserIds = /* @__PURE__ */ new Set([
+        selfId,
+        ...otherIds,
+        ...additionalUserIds
+      ]);
+      return [...uniqueUserIds];
+    }, [selfId, otherIds, additionalUserIds]);
+    const maxAvatars = Math.max(1, Math.floor(max));
+    const visibleUserIds = userIds.slice(0, maxAvatars);
+    const hiddenUserIds = userIds.slice(visibleUserIds.length);
+    const remainingUsersCount = hiddenUserIds.length;
+    const visibleItemsCount = visibleUserIds.length + Number(remainingUsersCount > 0);
+    if (userIds.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn.cn("lb-root lb-avatar-stack", className),
+        dir: $.dir,
+        style: {
+          "--lb-avatar-stack-count": visibleItemsCount - 1,
+          "--lb-avatar-stack-size": size,
+          ...style
+        },
+        ...props,
+        ref: forwardedRef,
+        children: [
+          visibleUserIds.map((userId, index) => {
+            if (!userId) {
+              return null;
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Tooltip.Tooltip,
+              {
+                content: /* @__PURE__ */ jsxRuntime.jsx(User.User, { userId }),
+                sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+                collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+                side: "top",
+                align: "center",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Avatar.Avatar,
+                  {
+                    userId,
+                    className: "lb-avatar-stack-avatar",
+                    style: { "--lb-avatar-stack-index": index }
+                  }
+                )
+              },
+              userId
+            );
+          }),
+          remainingUsersCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            Tooltip.Tooltip,
+            {
+              content: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "lb-users-tooltip-list", children: hiddenUserIds.map(
+                (userId) => userId ? /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "lb-users-tooltip-list-item", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { userId }),
+                  /* @__PURE__ */ jsxRuntime.jsx(User.User, { userId })
+                ] }, userId) : null
+              ) }),
+              sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+              collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+              side: "top",
+              align: "center",
+              className: "lb-users-tooltip",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more",
+                  style: {
+                    "--lb-avatar-stack-index": visibleUserIds.length
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lb-avatar-fallback", children: [
+                    "+",
+                    remainingUsersCount
+                  ] })
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+);
+
+exports.AvatarStack = AvatarStack;
+//# sourceMappingURL=AvatarStack.cjs.map

package/dist/components/AvatarStack.cjs.map

@@ -0,0 +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;;"}

package/dist/components/AvatarStack.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useOthers, useSelf } from '@liveblocks/react';
+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 { Avatar } from './internal/Avatar.js';
+import { TooltipProvider, Tooltip } from './internal/Tooltip.js';
+import { User } from './internal/User.js';
+
+
+const AvatarStack = forwardRef(
+  ({
+    userIds: additionalUserIds = [],
+    max = 3,
+    size,
+    overrides,
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    const $ = useOverrides(overrides);
+    const otherIds = useOthers((others) => others.map((user) => user.id));
+    const selfId = useSelf((self) => self.id);
+    const userIds = useMemo(() => {
+      const uniqueUserIds = /* @__PURE__ */ new Set([
+        selfId,
+        ...otherIds,
+        ...additionalUserIds
+      ]);
+      return [...uniqueUserIds];
+    }, [selfId, otherIds, additionalUserIds]);
+    const maxAvatars = Math.max(1, Math.floor(max));
+    const visibleUserIds = userIds.slice(0, maxAvatars);
+    const hiddenUserIds = userIds.slice(visibleUserIds.length);
+    const remainingUsersCount = hiddenUserIds.length;
+    const visibleItemsCount = visibleUserIds.length + Number(remainingUsersCount > 0);
+    if (userIds.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("lb-root lb-avatar-stack", className),
+        dir: $.dir,
+        style: {
+          "--lb-avatar-stack-count": visibleItemsCount - 1,
+          "--lb-avatar-stack-size": size,
+          ...style
+        },
+        ...props,
+        ref: forwardedRef,
+        children: [
+          visibleUserIds.map((userId, index) => {
+            if (!userId) {
+              return null;
+            }
+            return /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: /* @__PURE__ */ jsx(User, { userId }),
+                sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
+                collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+                side: "top",
+                align: "center",
+                children: /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    userId,
+                    className: "lb-avatar-stack-avatar",
+                    style: { "--lb-avatar-stack-index": index }
+                  }
+                )
+              },
+              userId
+            );
+          }),
+          remainingUsersCount > 0 ? /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: /* @__PURE__ */ jsx("ul", { className: "lb-users-tooltip-list", children: hiddenUserIds.map(
+                (userId) => userId ? /* @__PURE__ */ jsxs("li", { className: "lb-users-tooltip-list-item", children: [
+                  /* @__PURE__ */ jsx(Avatar, { userId }),
+                  /* @__PURE__ */ jsx(User, { userId })
+                ] }, userId) : null
+              ) }),
+              sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
+              collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+              side: "top",
+              align: "center",
+              className: "lb-users-tooltip",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "lb-avatar lb-avatar-stack-avatar lb-avatar-stack-more",
+                  style: {
+                    "--lb-avatar-stack-index": visibleUserIds.length
+                  },
+                  children: /* @__PURE__ */ jsxs("span", { className: "lb-avatar-fallback", children: [
+                    "+",
+                    remainingUsersCount
+                  ] })
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+);
+
+export { AvatarStack };
+//# sourceMappingURL=AvatarStack.js.map

package/dist/components/AvatarStack.js.map

@@ -0,0 +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;;"}