@liveblocks/react-ui 1.12.0-initial1

package/dist/index.d.ts

@@ -0,0 +1,476 @@
+import { CommentData, CommentBody, BaseMetadata, InboxNotificationData, InboxNotificationThreadData, InboxNotificationCustomData, ThreadData } from '@liveblocks/core';
+import React, { ReactNode, ComponentPropsWithoutRef, MouseEvent, ComponentType, FormEvent, RefAttributes, ComponentProps, PropsWithChildren } from 'react';
+
+declare type Direction = "ltr" | "rtl";
+declare type SlotProp = {
+    /**
+     * Replace the rendered element by the one passed as a child.
+     */
+    asChild?: boolean;
+};
+declare type ThreadMetadata = {
+    resolved?: boolean;
+};
+
+interface LocalizationOverrides {
+    locale: string;
+    dir: Direction;
+}
+interface GlobalOverrides {
+    USER_SELF: string;
+    USER_UNKNOWN: string;
+    LIST_REMAINING: (count: number) => string;
+    LIST_REMAINING_USERS: (count: number) => string;
+    LIST_REMAINING_COMMENTS: (count: number) => string;
+    EMOJI_PICKER_SEARCH_PLACEHOLDER: string;
+    EMOJI_PICKER_EMPTY: ReactNode;
+    EMOJI_PICKER_ERROR: (error: Error) => ReactNode;
+}
+interface CommentOverrides {
+    COMMENT_EDITED: ReactNode;
+    COMMENT_DELETED: ReactNode;
+    COMMENT_MORE: string;
+    COMMENT_EDIT: string;
+    COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;
+    COMMENT_EDIT_COMPOSER_CANCEL: string;
+    COMMENT_EDIT_COMPOSER_SAVE: string;
+    COMMENT_DELETE: string;
+    COMMENT_ADD_REACTION: string;
+    COMMENT_REACTION_LIST: (list: ReactNode, emoji: string, count: number) => ReactNode;
+    COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;
+}
+interface ComposerOverrides {
+    COMPOSER_INSERT_MENTION: string;
+    COMPOSER_INSERT_EMOJI: string;
+    COMPOSER_PLACEHOLDER: string;
+    COMPOSER_SEND: string;
+}
+interface ThreadOverrides {
+    THREAD_RESOLVE: string;
+    THREAD_UNRESOLVE: string;
+    THREAD_NEW_INDICATOR: string;
+    THREAD_NEW_INDICATOR_DESCRIPTION: string;
+    THREAD_COMPOSER_PLACEHOLDER: string;
+    THREAD_COMPOSER_SEND: string;
+}
+interface InboxNotificationOverrides {
+    INBOX_NOTIFICATION_MORE: string;
+    INBOX_NOTIFICATION_MARK_AS_READ: string;
+    INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (list: ReactNode, room: ReactNode | undefined, count: number) => ReactNode;
+    INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode | undefined) => ReactNode;
+}
+declare type Overrides = LocalizationOverrides & GlobalOverrides & ComposerOverrides & CommentOverrides & ThreadOverrides & InboxNotificationOverrides;
+
+interface CommentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The comment to display.
+     */
+    comment: CommentData;
+    /**
+     * How to show or hide the actions.
+     */
+    showActions?: boolean | "hover";
+    /**
+     * Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.
+     */
+    showDeleted?: boolean;
+    /**
+     * Whether to show reactions.
+     */
+    showReactions?: boolean;
+    /**
+     * Whether to indent the comment's content.
+     */
+    indentContent?: boolean;
+    /**
+     * The event handler called when the comment is edited.
+     */
+    onCommentEdit?: (comment: CommentData) => void;
+    /**
+     * The event handler called when the comment is deleted.
+     */
+    onCommentDelete?: (comment: CommentData) => void;
+    /**
+     * The event handler called when clicking on the author.
+     */
+    onAuthorClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The event handler called when clicking on a mention.
+     */
+    onMentionClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;
+}
+/**
+ * Displays a single comment.
+ *
+ * @example
+ * <>
+ *   {thread.comments.map((comment) => (
+ *     <Comment key={comment.id} comment={comment} />
+ *   ))}
+ * </>
+ */
+declare const Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ComposerEditorMentionProps {
+    /**
+     * Whether the mention is selected.
+     */
+    isSelected: boolean;
+    /**
+     * The mention's user ID.
+     */
+    userId: string;
+}
+interface ComposerEditorLinkProps {
+    /**
+     * The link's absolute URL.
+     *
+     * @example "https://example.com"
+     */
+    href: string;
+    /**
+     * The link's content.
+     *
+     * @example "www.example.com", "a link", etc.
+     */
+    children: ReactNode;
+}
+declare type ComposerEditorMentionSuggestionsProps = {
+    /**
+     * The list of suggested user IDs.
+     */
+    userIds: string[];
+    /**
+     * The currently selected user ID.
+     */
+    selectedUserId?: string;
+};
+interface ComposerEditorComponents {
+    /**
+     * The component used to display mentions.
+     */
+    Mention: ComponentType<ComposerEditorMentionProps>;
+    /**
+     * The component used to display mention suggestions.
+     */
+    MentionSuggestions: ComponentType<ComposerEditorMentionSuggestionsProps>;
+    /**
+     * The component used to display links.
+     */
+    Link: ComponentType<ComposerEditorLinkProps>;
+}
+interface ComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> {
+    /**
+     * The reading direction of the editor and related elements.
+     */
+    dir?: Direction;
+    /**
+     * The editor's initial value.
+     */
+    defaultValue?: CommentBody;
+    /**
+     * The text to display when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the editor is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to focus the editor on mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * The components displayed within the editor.
+     */
+    components?: Partial<ComposerEditorComponents>;
+}
+interface ComposerSubmitComment {
+    /**
+     * The submitted comment's body.
+     */
+    body: CommentBody;
+}
+
+declare type ComposerCreateThreadProps<M extends BaseMetadata> = {
+    threadId?: never;
+    commentId?: never;
+    /**
+     * The metadata of the thread to create.
+     */
+    metadata?: M;
+};
+declare type ComposerCreateCommentProps = {
+    /**
+     * The ID of the thread to reply to.
+     */
+    threadId: string;
+    commentId?: never;
+    metadata?: never;
+};
+declare type ComposerEditCommentProps = {
+    /**
+     * The ID of the thread to edit a comment in.
+     */
+    threadId: string;
+    /**
+     * The ID of the comment to edit.
+     */
+    commentId: string;
+    metadata?: never;
+};
+declare type ComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComponentPropsWithoutRef<"form">, "defaultValue"> & (ComposerCreateThreadProps<M> | ComposerCreateCommentProps | ComposerEditCommentProps) & {
+    /**
+     * The event handler called when the composer is submitted.
+     */
+    onComposerSubmit?: (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => Promise<void> | void;
+    /**
+     * The composer's initial value.
+     */
+    defaultValue?: ComposerEditorProps["defaultValue"];
+    /**
+     * Whether the composer is collapsed. Setting a value will make the composer controlled.
+     */
+    collapsed?: boolean;
+    /**
+     * The event handler called when the collapsed state of the composer changes.
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Whether the composer is disabled.
+     */
+    disabled?: ComposerEditorProps["disabled"];
+    /**
+     * Whether to focus the composer on mount.
+     */
+    autoFocus?: ComposerEditorProps["autoFocus"];
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & ComposerOverrides>;
+};
+/**
+ * Displays a composer to create comments.
+ *
+ * @example
+ * <Composer />
+ */
+declare const Composer: <M extends BaseMetadata = ThreadMetadata>(props: ComposerProps<M> & RefAttributes<HTMLFormElement>) => JSX.Element;
+
+interface GlobalComponents {
+    Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
+}
+declare type Components = GlobalComponents;
+
+interface AvatarProps extends ComponentProps<"div"> {
+    /**
+     * The user ID to display the avatar for.
+     */
+    userId: string;
+}
+
+declare type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+declare type ComponentTypeWithRef<T extends keyof JSX.IntrinsicElements, P> = ComponentType<P & Pick<ComponentProps<T>, "ref">>;
+declare type InboxNotificationKinds = Record<`$${string}`, ComponentTypeWithRef<"a", Optional<InboxNotificationCustomProps, "title" | "children">>> & {
+    thread: ComponentTypeWithRef<"a", InboxNotificationThreadProps>;
+};
+interface InboxNotificationSharedProps {
+    /**
+     * How to show or hide the actions.
+     */
+    showActions?: boolean | "hover";
+}
+interface InboxNotificationProps extends Omit<ComponentPropsWithoutRef<"a">, "title">, InboxNotificationSharedProps {
+    /**
+     * The inbox notification to display.
+     */
+    inboxNotification: InboxNotificationData;
+    /**
+     * Override specific kinds of inbox notifications.
+     */
+    kinds?: Partial<InboxNotificationKinds>;
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & InboxNotificationOverrides & CommentOverrides>;
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<GlobalComponents>;
+}
+interface InboxNotificationThreadProps extends Omit<InboxNotificationProps, "kinds" | "children">, InboxNotificationSharedProps {
+    /**
+     * The inbox notification to display.
+     */
+    inboxNotification: InboxNotificationThreadData;
+    /**
+     * Whether to show the room name in the title.
+     */
+    showRoomName?: boolean;
+}
+interface InboxNotificationCustomProps extends Omit<InboxNotificationProps, "kinds">, InboxNotificationSharedProps, SlotProp {
+    /**
+     * The inbox notification to display.
+     */
+    inboxNotification: InboxNotificationCustomData;
+    /**
+     * The inbox notification's content.
+     */
+    children: ReactNode;
+    /**
+     * The inbox notification's title.
+     */
+    title: ReactNode;
+    /**
+     * The inbox notification's aside content.
+     * Can be combined with `InboxNotification.Icon` or `InboxNotification.Avatar` to easily follow default styles.
+     */
+    aside?: ReactNode;
+    /**
+     * Whether to mark the inbox notification as read when clicked.
+     */
+    markAsReadOnClick?: boolean;
+}
+declare type InboxNotificationIconProps = ComponentProps<"div">;
+declare type InboxNotificationAvatarProps = AvatarProps;
+declare function InboxNotificationIcon({ className, ...props }: InboxNotificationIconProps): React.JSX.Element;
+declare function InboxNotificationAvatar({ className, ...props }: InboxNotificationAvatarProps): React.JSX.Element;
+/**
+ * Displays a single inbox notification.
+ *
+ * @example
+ * <>
+ *   {inboxNotifications.map((inboxNotification) => (
+ *     <InboxNotification
+ *       key={inboxNotification.id}
+ *       inboxNotification={inboxNotification}
+ *       href={`/rooms/${inboxNotification.roomId}`
+ *     />
+ *   ))}
+ * </>
+ */
+declare const InboxNotification: React.ForwardRefExoticComponent<InboxNotificationProps & React.RefAttributes<HTMLAnchorElement>> & {
+    Thread: React.ForwardRefExoticComponent<InboxNotificationThreadProps & React.RefAttributes<HTMLAnchorElement>>;
+    Custom: React.ForwardRefExoticComponent<InboxNotificationCustomProps & React.RefAttributes<HTMLAnchorElement>>;
+    Icon: typeof InboxNotificationIcon;
+    Avatar: typeof InboxNotificationAvatar;
+};
+
+declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
+/**
+ * Displays inbox notifications as a list.
+ *
+ * @example
+ * <InboxNotificationList>
+ *   {inboxNotifications.map((inboxNotification) => (
+ *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />
+ *   ))}
+ * </InboxNotificationList>
+ */
+declare const InboxNotificationList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+
+interface ThreadProps<M extends BaseMetadata = ThreadMetadata> extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The thread to display.
+     */
+    thread: ThreadData<M>;
+    /**
+     * How to show or hide the composer to reply to the thread.
+     */
+    showComposer?: boolean | "collapsed";
+    /**
+     * Whether to show the action to resolve the thread.
+     */
+    showResolveAction?: boolean;
+    /**
+     * How to show or hide the actions.
+     */
+    showActions?: CommentProps["showActions"];
+    /**
+     * Whether to show reactions.
+     */
+    showReactions?: CommentProps["showReactions"];
+    /**
+     * Whether to indent the comments' content.
+     */
+    indentCommentContent?: CommentProps["indentContent"];
+    /**
+     * Whether to show deleted comments.
+     */
+    showDeletedComments?: CommentProps["showDeleted"];
+    /**
+     * The event handler called when changing the resolved status.
+     */
+    onResolvedChange?: (resolved: boolean) => void;
+    /**
+     * The event handler called when a comment is edited.
+     */
+    onCommentEdit?: CommentProps["onCommentEdit"];
+    /**
+     * The event handler called when a comment is deleted.
+     */
+    onCommentDelete?: CommentProps["onCommentDelete"];
+    /**
+     * The event handler called when the thread is deleted.
+     * A thread is deleted when all its comments are deleted.
+     */
+    onThreadDelete?: (thread: ThreadData<M>) => void;
+    /**
+     * The event handler called when clicking on a comment's author.
+     */
+    onAuthorClick?: CommentProps["onAuthorClick"];
+    /**
+     * The event handler called when clicking on a mention.
+     */
+    onMentionClick?: CommentProps["onMentionClick"];
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
+}
+/**
+ * Displays a thread of comments, with a composer to reply
+ * to it.
+ *
+ * @example
+ * <>
+ *   {threads.map((thread) => (
+ *     <Thread key={thread.id} thread={thread} />
+ *   ))}
+ * </>
+ */
+declare const Thread: <M extends BaseMetadata = ThreadMetadata>(props: ThreadProps<M> & RefAttributes<HTMLDivElement>) => JSX.Element;
+
+declare type LiveblocksUIConfigProps = PropsWithChildren<{
+    /**
+     * Override the components' strings.
+     */
+    overrides?: Partial<Overrides>;
+    /**
+     * Override the components' components.
+     */
+    components?: Partial<Components>;
+    /**
+     * The container to render the portal into.
+     */
+    portalContainer?: HTMLElement;
+}>;
+/**
+ * Set configuration options for all components.
+ *
+ * @example
+ * <LiveblocksUIConfig overrides={{ locale: "fr", USER_UNKNOWN: "Anonyme", ... }}>
+ *   <App />
+ * </LiveblocksUIConfig>
+ */
+declare function LiveblocksUIConfig({ overrides, components, portalContainer, children, }: LiveblocksUIConfigProps): React.JSX.Element;
+
+export { Comment, CommentProps, Composer, ComposerProps, ComposerSubmitComment, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationProps, InboxNotificationThreadProps, LiveblocksUIConfig, Thread, ThreadProps };

package/dist/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var core = require('@liveblocks/core');
+var version = require('./version.js');
+var Comment = require('./components/Comment.js');
+var Composer = require('./components/Composer.js');
+var InboxNotification = require('./components/InboxNotification.js');
+var InboxNotificationList = require('./components/InboxNotificationList.js');
+var Thread = require('./components/Thread.js');
+var config = require('./config.js');
+
+core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
+
+exports.Comment = Comment.Comment;
+exports.Composer = Composer.Composer;
+exports.InboxNotification = InboxNotification.InboxNotification;
+exports.InboxNotificationList = InboxNotificationList.InboxNotificationList;
+exports.Thread = Thread.Thread;
+exports.LiveblocksUIConfig = config.LiveblocksUIConfig;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { CommentProps } from \"./components/Comment\";\nexport { Comment } from \"./components/Comment\";\nexport type { ComposerProps } from \"./components/Composer\";\nexport { Composer } from \"./components/Composer\";\nexport type {\n  InboxNotificationAvatarProps,\n  InboxNotificationCustomProps,\n  InboxNotificationIconProps,\n  InboxNotificationProps,\n  InboxNotificationThreadProps,\n} from \"./components/InboxNotification\";\nexport { InboxNotification } from \"./components/InboxNotification\";\nexport type { InboxNotificationListProps } from \"./components/InboxNotificationList\";\nexport { InboxNotificationList } from \"./components/InboxNotificationList\";\nexport type { ThreadProps } from \"./components/Thread\";\nexport { Thread } from \"./components/Thread\";\nexport { LiveblocksUIConfig } from \"./config\";\nexport type { ComposerSubmitComment } from \"./primitives\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;"}

package/dist/index.mjs

@@ -0,0 +1,11 @@
+import { detectDupes } from '@liveblocks/core';
+import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.mjs';
+export { Comment } from './components/Comment.mjs';
+export { Composer } from './components/Composer.mjs';
+export { InboxNotification } from './components/InboxNotification.mjs';
+export { InboxNotificationList } from './components/InboxNotificationList.mjs';
+export { Thread } from './components/Thread.mjs';
+export { LiveblocksUIConfig } from './config.mjs';
+
+detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { CommentProps } from \"./components/Comment\";\nexport { Comment } from \"./components/Comment\";\nexport type { ComposerProps } from \"./components/Composer\";\nexport { Composer } from \"./components/Composer\";\nexport type {\n  InboxNotificationAvatarProps,\n  InboxNotificationCustomProps,\n  InboxNotificationIconProps,\n  InboxNotificationProps,\n  InboxNotificationThreadProps,\n} from \"./components/InboxNotification\";\nexport { InboxNotification } from \"./components/InboxNotification\";\nexport type { InboxNotificationListProps } from \"./components/InboxNotificationList\";\nexport { InboxNotificationList } from \"./components/InboxNotificationList\";\nexport type { ThreadProps } from \"./components/Thread\";\nexport { Thread } from \"./components/Thread\";\nexport { LiveblocksUIConfig } from \"./config\";\nexport type { ComposerSubmitComment } from \"./primitives\";\n"],"names":[],"mappings":";;;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/overrides.js

@@ -0,0 +1,100 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var Emoji = require('./components/internal/Emoji.js');
+var pluralize = require('./utils/pluralize.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const defaultOverrides = {
+  locale: "en",
+  dir: "ltr",
+  USER_SELF: "you",
+  USER_UNKNOWN: "Anonymous",
+  LIST_REMAINING: (count) => `${count} more`,
+  LIST_REMAINING_USERS: (count) => `${count} ${pluralize.pluralize(count, "other")}`,
+  LIST_REMAINING_COMMENTS: (count) => `${count} more ${pluralize.pluralize(count, "comment")}`,
+  EMOJI_PICKER_SEARCH_PLACEHOLDER: "Search\u2026",
+  EMOJI_PICKER_EMPTY: "No emoji found.",
+  EMOJI_PICKER_ERROR: () => "There was an error while getting the list of emoji.",
+  COMPOSER_INSERT_MENTION: "Mention someone",
+  COMPOSER_INSERT_EMOJI: "Add emoji",
+  COMPOSER_PLACEHOLDER: "Write a comment\u2026",
+  COMPOSER_SEND: "Send",
+  COMMENT_EDITED: "(edited)",
+  COMMENT_DELETED: "This comment has been deleted.",
+  COMMENT_MORE: "More",
+  COMMENT_EDIT: "Edit comment",
+  COMMENT_EDIT_COMPOSER_PLACEHOLDER: "Edit comment\u2026",
+  COMMENT_EDIT_COMPOSER_CANCEL: "Cancel",
+  COMMENT_EDIT_COMPOSER_SAVE: "Save",
+  COMMENT_DELETE: "Delete comment",
+  COMMENT_ADD_REACTION: "Add reaction",
+  COMMENT_REACTION_LIST: (list, emoji) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, list, " reacted with ", /* @__PURE__ */ React__namespace.createElement(Emoji.Emoji, {
+    emoji
+  })),
+  COMMENT_REACTION_DESCRIPTION: (emoji, count) => `${count} ${pluralize.pluralize(count, "reaction")}, react with ${emoji}`,
+  THREAD_RESOLVE: "Resolve thread",
+  THREAD_UNRESOLVE: "Re-open thread",
+  THREAD_NEW_INDICATOR: "New",
+  THREAD_NEW_INDICATOR_DESCRIPTION: "New comments",
+  THREAD_COMPOSER_PLACEHOLDER: "Reply to thread\u2026",
+  THREAD_COMPOSER_SEND: "Reply",
+  INBOX_NOTIFICATION_MORE: "More",
+  INBOX_NOTIFICATION_MARK_AS_READ: "Mark as read",
+  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (list, room) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, list, " commented", room ? /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, " in ", room) : /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, " in a thread")),
+  INBOX_NOTIFICATION_THREAD_MENTION: (user, room) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, user, " mentioned you", room ? /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, " in ", room) : null)
+};
+const OverridesContext = React.createContext(void 0);
+function useOverrides(overrides) {
+  const contextOverrides = React.useContext(OverridesContext);
+  return React.useMemo(
+    () => ({
+      ...defaultOverrides,
+      ...contextOverrides,
+      ...overrides
+    }),
+    [contextOverrides, overrides]
+  );
+}
+function OverridesProvider({
+  children,
+  overrides: providerOverrides
+}) {
+  const contextOverrides = React.useContext(OverridesContext);
+  const overrides = React.useMemo(
+    () => ({
+      ...defaultOverrides,
+      ...contextOverrides,
+      ...providerOverrides
+    }),
+    [contextOverrides, providerOverrides]
+  );
+  return /* @__PURE__ */ React__namespace.createElement(OverridesContext.Provider, {
+    value: overrides
+  }, children);
+}
+
+exports.OverridesContext = OverridesContext;
+exports.OverridesProvider = OverridesProvider;
+exports.defaultOverrides = defaultOverrides;
+exports.useOverrides = useOverrides;
+//# sourceMappingURL=overrides.js.map

package/dist/overrides.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overrides.js","sources":["../src/overrides.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport * as React from \"react\";\n\nimport { Emoji } from \"./components/internal/Emoji\";\nimport type { Direction } from \"./types\";\nimport { pluralize } from \"./utils/pluralize\";\n\nexport interface LocalizationOverrides {\n  locale: string;\n  dir: Direction;\n}\n\nexport interface GlobalOverrides {\n  USER_SELF: string;\n  USER_UNKNOWN: string;\n  LIST_REMAINING: (count: number) => string;\n  LIST_REMAINING_USERS: (count: number) => string;\n  LIST_REMAINING_COMMENTS: (count: number) => string;\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: string;\n  EMOJI_PICKER_EMPTY: ReactNode;\n  EMOJI_PICKER_ERROR: (error: Error) => ReactNode;\n}\n\nexport interface CommentOverrides {\n  COMMENT_EDITED: ReactNode;\n  COMMENT_DELETED: ReactNode;\n  COMMENT_MORE: string;\n  COMMENT_EDIT: string;\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;\n  COMMENT_EDIT_COMPOSER_CANCEL: string;\n  COMMENT_EDIT_COMPOSER_SAVE: string;\n  COMMENT_DELETE: string;\n  COMMENT_ADD_REACTION: string;\n  COMMENT_REACTION_LIST: (\n    list: ReactNode,\n    emoji: string,\n    count: number\n  ) => ReactNode;\n  COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;\n}\n\nexport interface ComposerOverrides {\n  COMPOSER_INSERT_MENTION: string;\n  COMPOSER_INSERT_EMOJI: string;\n  COMPOSER_PLACEHOLDER: string;\n  COMPOSER_SEND: string;\n}\n\nexport interface ThreadOverrides {\n  THREAD_RESOLVE: string;\n  THREAD_UNRESOLVE: string;\n  THREAD_NEW_INDICATOR: string;\n  THREAD_NEW_INDICATOR_DESCRIPTION: string;\n  THREAD_COMPOSER_PLACEHOLDER: string;\n  THREAD_COMPOSER_SEND: string;\n}\n\nexport interface InboxNotificationOverrides {\n  INBOX_NOTIFICATION_MORE: string;\n  INBOX_NOTIFICATION_MARK_AS_READ: string;\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode | undefined,\n    count: number\n  ) => ReactNode;\n  INBOX_NOTIFICATION_THREAD_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n}\n\nexport type Overrides = LocalizationOverrides &\n  GlobalOverrides &\n  ComposerOverrides &\n  CommentOverrides &\n  ThreadOverrides &\n  InboxNotificationOverrides;\n\ntype OverridesProviderProps = PropsWithChildren<{\n  overrides?: Partial<Overrides>;\n}>;\n\nexport const defaultOverrides: Overrides = {\n  locale: \"en\",\n  dir: \"ltr\",\n  USER_SELF: \"you\",\n  USER_UNKNOWN: \"Anonymous\",\n  LIST_REMAINING: (count) => `${count} more`,\n  LIST_REMAINING_USERS: (count) => `${count} ${pluralize(count, \"other\")}`,\n  LIST_REMAINING_COMMENTS: (count) =>\n    `${count} more ${pluralize(count, \"comment\")}`,\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: \"Search…\",\n  EMOJI_PICKER_EMPTY: \"No emoji found.\",\n  EMOJI_PICKER_ERROR: () =>\n    \"There was an error while getting the list of emoji.\",\n  COMPOSER_INSERT_MENTION: \"Mention someone\",\n  COMPOSER_INSERT_EMOJI: \"Add emoji\",\n  COMPOSER_PLACEHOLDER: \"Write a comment…\",\n  COMPOSER_SEND: \"Send\",\n  COMMENT_EDITED: \"(edited)\",\n  COMMENT_DELETED: \"This comment has been deleted.\",\n  COMMENT_MORE: \"More\",\n  COMMENT_EDIT: \"Edit comment\",\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: \"Edit comment…\",\n  COMMENT_EDIT_COMPOSER_CANCEL: \"Cancel\",\n  COMMENT_EDIT_COMPOSER_SAVE: \"Save\",\n  COMMENT_DELETE: \"Delete comment\",\n  COMMENT_ADD_REACTION: \"Add reaction\",\n  COMMENT_REACTION_LIST: (list, emoji) => (\n    <>\n      {list} reacted with <Emoji emoji={emoji} />\n    </>\n  ),\n  COMMENT_REACTION_DESCRIPTION: (emoji, count) =>\n    `${count} ${pluralize(count, \"reaction\")}, react with ${emoji}`,\n  THREAD_RESOLVE: \"Resolve thread\",\n  THREAD_UNRESOLVE: \"Re-open thread\",\n  THREAD_NEW_INDICATOR: \"New\",\n  THREAD_NEW_INDICATOR_DESCRIPTION: \"New comments\",\n  THREAD_COMPOSER_PLACEHOLDER: \"Reply to thread…\",\n  THREAD_COMPOSER_SEND: \"Reply\",\n  INBOX_NOTIFICATION_MORE: \"More\",\n  INBOX_NOTIFICATION_MARK_AS_READ: \"Mark as read\",\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode\n  ) => (\n    <>\n      {list} commented\n      {room ? <> in {room}</> : <> in a thread</>}\n    </>\n  ),\n  INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n};\n\nexport const OverridesContext = createContext<Overrides | undefined>(undefined);\n\nexport function useOverrides(overrides?: Partial<Overrides>): Overrides {\n  const contextOverrides = useContext(OverridesContext);\n\n  return useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...overrides,\n    }),\n    [contextOverrides, overrides]\n  );\n}\n\nexport function OverridesProvider({\n  children,\n  overrides: providerOverrides,\n}: OverridesProviderProps) {\n  const contextOverrides = useContext(OverridesContext);\n  const overrides = useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...providerOverrides,\n    }),\n    [contextOverrides, providerOverrides]\n  );\n\n  return (\n    <OverridesContext.Provider value={overrides}>\n      {children}\n    </OverridesContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqFO;AAAoC;AACjC;AACH;AACM;AACG;AACgB;AACuC;AAExB;AACZ;AACb;AAElB;AACuB;AACF;AACD;AACP;AACC;AACC;AACH;AACA;AACqB;AACL;AACF;AACZ;AACM;AAGG;AAAM;AAC7B;AAGwD;AAC1C;AACE;AACI;AACY;AACL;AACP;AACG;AACQ;AAQ/B;AAOJ;AAEa;AAEN;AACL;AAEA;AAAO;AACE;AACF;AACA;AACA;AACL;AAC4B;AAEhC;AAEO;AAA2B;AAChC;AAEF;AACE;AACA;AAAkB;AACT;AACF;AACA;AACA;AACL;AACoC;AAGtC;AACG;AAAiC;AAItC;;;;;"}