@liveblocks/react 1.12.0 → 2.0.0-alpha1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,951 @@
1
+ import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, RoomNotificationSettings, Room, Status, BroadcastOptions, OthersEvent, LostConnectionEvent, History, Client, BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
2
+ import * as React$1 from 'react';
3
+ import React__default, { ReactElement, ReactNode, PropsWithChildren } from 'react';
4
+ import { BaseMetadata, QueryMetadata, DRI, CommentBody, InboxNotificationData, Resolve, ToImmutable, ThreadData, LiveblocksError, RoomEventMessage, CommentData, PartialNullable, RoomInitializers, OpaqueClient, DU, ClientOptions, DM, OpaqueRoom, RoomNotificationSettings as RoomNotificationSettings$1, DP, DS, DE } from '@liveblocks/core';
5
+
6
+ declare type Props = {
7
+ fallback: NonNullable<ReactNode> | null;
8
+ children: () => ReactNode | undefined;
9
+ };
10
+ /**
11
+ * Almost like a normal <Suspense> component, except that for server-side
12
+ * renders, the fallback will be used.
13
+ *
14
+ * The child props will have to be provided in a function, i.e. change:
15
+ *
16
+ * <Suspense fallback={<Loading />}>
17
+ * <MyRealComponent a={1} />
18
+ * </Suspense>
19
+ *
20
+ * To:
21
+ *
22
+ * <ClientSideSuspense fallback={<Loading />}>
23
+ * {() => <MyRealComponent a={1} />}
24
+ * </ClientSideSuspense>
25
+ *
26
+ */
27
+ declare function ClientSideSuspense(props: Props): ReactElement;
28
+
29
+ declare type UseThreadsOptions<M extends BaseMetadata> = {
30
+ /**
31
+ * The query (including metadata) to filter the threads by. If provided, only threads
32
+ * that match the query will be returned. If not provided, all threads will be returned.
33
+ */
34
+ query?: {
35
+ /**
36
+ * The metadata to filter the threads by. If provided, only threads with metadata that matches
37
+ * the provided metadata will be returned. If not provided, all threads will be returned.
38
+ */
39
+ metadata?: Partial<QueryMetadata<M>>;
40
+ };
41
+ /**
42
+ * Whether to scroll to a comment on load based on the URL hash. Defaults to `true`.
43
+ *
44
+ * @example
45
+ * Given the URL `https://example.com/my-room#cm_xxx`, the `cm_xxx` comment will be
46
+ * scrolled to on load if it exists in the page.
47
+ */
48
+ scrollOnLoad?: boolean;
49
+ };
50
+
51
+ declare type UserStateLoading = {
52
+ isLoading: true;
53
+ user?: never;
54
+ error?: never;
55
+ };
56
+ declare type UserStateError = {
57
+ isLoading: false;
58
+ user?: never;
59
+ error: Error;
60
+ };
61
+ declare type UserStateSuccess<T> = {
62
+ isLoading: false;
63
+ user: T;
64
+ error?: never;
65
+ };
66
+ declare type UserState<T> = UserStateLoading | UserStateError | UserStateSuccess<T>;
67
+ declare type RoomInfoStateLoading = {
68
+ isLoading: true;
69
+ info?: never;
70
+ error?: never;
71
+ };
72
+ declare type RoomInfoStateError = {
73
+ isLoading: false;
74
+ info?: never;
75
+ error: Error;
76
+ };
77
+ declare type RoomInfoStateSuccess = {
78
+ isLoading: false;
79
+ info: DRI;
80
+ error?: never;
81
+ };
82
+ declare type RoomInfoState = RoomInfoStateLoading | RoomInfoStateError | RoomInfoStateSuccess;
83
+ declare type CreateThreadOptions<M extends BaseMetadata> = Record<string, never> extends M ? {
84
+ body: CommentBody;
85
+ metadata?: M;
86
+ } : {
87
+ body: CommentBody;
88
+ metadata: M;
89
+ };
90
+ declare type EditThreadMetadataOptions<M extends BaseMetadata> = {
91
+ threadId: string;
92
+ metadata: PartialNullable<M>;
93
+ };
94
+ declare type CreateCommentOptions = {
95
+ threadId: string;
96
+ body: CommentBody;
97
+ };
98
+ declare type EditCommentOptions = {
99
+ threadId: string;
100
+ commentId: string;
101
+ body: CommentBody;
102
+ };
103
+ declare type DeleteCommentOptions = {
104
+ threadId: string;
105
+ commentId: string;
106
+ };
107
+ declare type CommentReactionOptions = {
108
+ threadId: string;
109
+ commentId: string;
110
+ emoji: string;
111
+ };
112
+ declare type ThreadsStateLoading = {
113
+ isLoading: true;
114
+ threads?: never;
115
+ error?: never;
116
+ };
117
+ declare type ThreadsStateResolved<M extends BaseMetadata> = {
118
+ isLoading: false;
119
+ threads: ThreadData<M>[];
120
+ error?: Error;
121
+ };
122
+ declare type ThreadsStateSuccess<M extends BaseMetadata> = {
123
+ isLoading: false;
124
+ threads: ThreadData<M>[];
125
+ error?: never;
126
+ };
127
+ declare type ThreadsState<M extends BaseMetadata> = ThreadsStateLoading | ThreadsStateResolved<M>;
128
+ declare type InboxNotificationsStateLoading = {
129
+ isLoading: true;
130
+ inboxNotifications?: never;
131
+ error?: never;
132
+ };
133
+ declare type InboxNotificationsStateResolved = {
134
+ isLoading: false;
135
+ inboxNotifications: InboxNotificationData[];
136
+ error?: Error;
137
+ };
138
+ declare type InboxNotificationsStateSuccess = {
139
+ isLoading: false;
140
+ inboxNotifications: InboxNotificationData[];
141
+ error?: never;
142
+ };
143
+ declare type InboxNotificationsStateError = {
144
+ isLoading: false;
145
+ inboxNotifications?: never;
146
+ error: Error;
147
+ };
148
+ declare type InboxNotificationsState = InboxNotificationsStateLoading | InboxNotificationsStateResolved | InboxNotificationsStateError;
149
+ declare type UnreadInboxNotificationsCountStateLoading = {
150
+ isLoading: true;
151
+ count?: never;
152
+ error?: never;
153
+ };
154
+ declare type UnreadInboxNotificationsCountStateSuccess = {
155
+ isLoading: false;
156
+ count: number;
157
+ error?: never;
158
+ };
159
+ declare type UnreadInboxNotificationsCountStateError = {
160
+ isLoading: false;
161
+ count?: never;
162
+ error: Error;
163
+ };
164
+ declare type UnreadInboxNotificationsCountState = UnreadInboxNotificationsCountStateLoading | UnreadInboxNotificationsCountStateSuccess | UnreadInboxNotificationsCountStateError;
165
+ declare type RoomNotificationSettingsStateLoading = {
166
+ isLoading: true;
167
+ settings?: never;
168
+ error?: never;
169
+ };
170
+ declare type RoomNotificationSettingsStateError = {
171
+ isLoading: false;
172
+ settings?: never;
173
+ error: Error;
174
+ };
175
+ declare type RoomNotificationSettingsStateSuccess = {
176
+ isLoading: false;
177
+ settings: RoomNotificationSettings;
178
+ error?: never;
179
+ };
180
+ declare type RoomNotificationSettingsState = RoomNotificationSettingsStateLoading | RoomNotificationSettingsStateError | RoomNotificationSettingsStateSuccess;
181
+ declare type RoomProviderProps<P extends JsonObject, S extends LsonObject> = Resolve<{
182
+ /**
183
+ * The id of the room you want to connect to
184
+ */
185
+ id: string;
186
+ children: React.ReactNode;
187
+ /**
188
+ * Whether or not the room should connect to Liveblocks servers
189
+ * when the RoomProvider is rendered.
190
+ *
191
+ * By default equals to `typeof window !== "undefined"`,
192
+ * meaning the RoomProvider tries to connect to Liveblocks servers
193
+ * only on the client side.
194
+ */
195
+ autoConnect?: boolean;
196
+ /**
197
+ * If you're on React 17 or lower, pass in a reference to
198
+ * `ReactDOM.unstable_batchedUpdates` or
199
+ * `ReactNative.unstable_batchedUpdates` here.
200
+ *
201
+ * @example
202
+ * import { unstable_batchedUpdates } from "react-dom";
203
+ *
204
+ * <RoomProvider ... unstable_batchedUpdates={unstable_batchedUpdates} />
205
+ *
206
+ * This will prevent you from running into the so-called "stale props"
207
+ * and/or "zombie child" problem that React 17 and lower can suffer from.
208
+ * Not necessary when you're on React v18 or later.
209
+ */
210
+ unstable_batchedUpdates?: (cb: () => void) => void;
211
+ } & RoomInitializers<P, S>>;
212
+ /**
213
+ * For any function type, returns a similar function type, but without the
214
+ * first argument.
215
+ */
216
+ declare type OmitFirstArg<F> = F extends (first: any, ...rest: infer A) => infer R ? (...args: A) => R : never;
217
+ declare type MutationContext<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta> = {
218
+ storage: LiveObject<S>;
219
+ self: User<P, U>;
220
+ others: readonly User<P, U>[];
221
+ setMyPresence: (patch: Partial<P>, options?: {
222
+ addToHistory: boolean;
223
+ }) => void;
224
+ };
225
+ declare type ThreadSubscription = {
226
+ status: "not-subscribed";
227
+ unreadSince?: never;
228
+ } | {
229
+ status: "subscribed";
230
+ unreadSince: null;
231
+ } | {
232
+ status: "subscribed";
233
+ unreadSince: Date;
234
+ };
235
+ declare type SharedContextBundle<U extends BaseUserMeta> = {
236
+ classic: {
237
+ /**
238
+ * Returns user info from a given user ID.
239
+ *
240
+ * @example
241
+ * const { user, error, isLoading } = useUser("user-id");
242
+ */
243
+ useUser(userId: string): UserState<U["info"]>;
244
+ /**
245
+ * Returns room info from a given room ID.
246
+ *
247
+ * @example
248
+ * const { info, error, isLoading } = useRoomInfo("room-id");
249
+ */
250
+ useRoomInfo(roomId: string): RoomInfoState;
251
+ };
252
+ suspense: {
253
+ /**
254
+ * Returns user info from a given user ID.
255
+ *
256
+ * @example
257
+ * const { user } = useUser("user-id");
258
+ */
259
+ useUser(userId: string): UserStateSuccess<U["info"]>;
260
+ /**
261
+ * Returns room info from a given room ID.
262
+ *
263
+ * @example
264
+ * const { info } = useRoomInfo("room-id");
265
+ */
266
+ useRoomInfo(roomId: string): RoomInfoStateSuccess;
267
+ };
268
+ };
269
+ /**
270
+ * Properties that are the same in RoomContext and RoomContext["suspense"].
271
+ */
272
+ declare type RoomContextBundleCommon<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta, E extends Json, M extends BaseMetadata> = {
273
+ /**
274
+ * You normally don't need to directly interact with the RoomContext, but
275
+ * it can be necessary if you're building an advanced app where you need to
276
+ * set up a context bridge between two React renderers.
277
+ */
278
+ RoomContext: React.Context<Room<P, S, U, E, M> | null>;
279
+ /**
280
+ * Makes a Room available in the component hierarchy below.
281
+ * Joins the room when the component is mounted, and automatically leaves
282
+ * the room when the component is unmounted.
283
+ */
284
+ RoomProvider(props: RoomProviderProps<P, S>): JSX.Element;
285
+ /**
286
+ * Returns the Room of the nearest RoomProvider above in the React component
287
+ * tree.
288
+ */
289
+ useRoom(): Room<P, S, U, E, M>;
290
+ /**
291
+ * Returns the current connection status for the Room, and triggers
292
+ * a re-render whenever it changes. Can be used to render a status badge.
293
+ */
294
+ useStatus(): Status;
295
+ /**
296
+ * @deprecated It's recommended to use `useMutation` for writing to Storage,
297
+ * which will automatically batch all mutations.
298
+ *
299
+ * Returns a function that batches modifications made during the given function.
300
+ * All the modifications are sent to other clients in a single message.
301
+ * All the modifications are merged in a single history item (undo/redo).
302
+ * All the subscribers are called only after the batch is over.
303
+ */
304
+ useBatch<T>(): (callback: () => T) => T;
305
+ /**
306
+ * Returns a callback that lets you broadcast custom events to other users in the room
307
+ *
308
+ * @example
309
+ * const broadcast = useBroadcastEvent();
310
+ *
311
+ * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
312
+ */
313
+ useBroadcastEvent(): (event: E, options?: BroadcastOptions) => void;
314
+ /**
315
+ * Get informed when users enter or leave the room, as an event.
316
+ *
317
+ * @example
318
+ * useOthersListener({ type, user, others }) => {
319
+ * if (type === 'enter') {
320
+ * // `user` has joined the room
321
+ * } else if (type === 'leave') {
322
+ * // `user` has left the room
323
+ * }
324
+ * })
325
+ */
326
+ useOthersListener(callback: (event: OthersEvent<P, U>) => void): void;
327
+ /**
328
+ * Get informed when reconnecting to the Liveblocks servers is taking
329
+ * longer than usual. This typically is a sign of a client that has lost
330
+ * internet connectivity.
331
+ *
332
+ * This isn't problematic (because the Liveblocks client is still trying to
333
+ * reconnect), but it's typically a good idea to inform users about it if
334
+ * the connection takes too long to recover.
335
+ *
336
+ * @example
337
+ * useLostConnectionListener(event => {
338
+ * if (event === 'lost') {
339
+ * toast.warn('Reconnecting to the Liveblocks servers is taking longer than usual...')
340
+ * } else if (event === 'failed') {
341
+ * toast.warn('Reconnecting to the Liveblocks servers failed.')
342
+ * } else if (event === 'restored') {
343
+ * toast.clear();
344
+ * }
345
+ * })
346
+ */
347
+ useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
348
+ /**
349
+ * useErrorListener is a React hook that allows you to respond to potential room
350
+ * connection errors.
351
+ *
352
+ * @example
353
+ * useErrorListener(er => {
354
+ * console.error(er);
355
+ * })
356
+ */
357
+ useErrorListener(callback: (err: LiveblocksError) => void): void;
358
+ /**
359
+ * useEventListener is a React hook that allows you to respond to events broadcast
360
+ * by other users in the room.
361
+ *
362
+ * @example
363
+ * useEventListener(({ connectionId, event }) => {
364
+ * if (event.type === "CUSTOM_EVENT") {
365
+ * // Do something
366
+ * }
367
+ * });
368
+ */
369
+ useEventListener(callback: (data: RoomEventMessage<P, U, E>) => void): void;
370
+ /**
371
+ * Returns the room.history
372
+ */
373
+ useHistory(): History;
374
+ /**
375
+ * Returns a function that undoes the last operation executed by the current client.
376
+ * It does not impact operations made by other clients.
377
+ */
378
+ useUndo(): () => void;
379
+ /**
380
+ * Returns a function that redoes the last operation executed by the current client.
381
+ * It does not impact operations made by other clients.
382
+ */
383
+ useRedo(): () => void;
384
+ /**
385
+ * Returns whether there are any operations to undo.
386
+ */
387
+ useCanUndo(): boolean;
388
+ /**
389
+ * Returns whether there are any operations to redo.
390
+ */
391
+ useCanRedo(): boolean;
392
+ /**
393
+ * Returns the mutable (!) Storage root. This hook exists for
394
+ * backward-compatible reasons.
395
+ *
396
+ * @example
397
+ * const [root] = useStorageRoot();
398
+ */
399
+ useStorageRoot(): [root: LiveObject<S> | null];
400
+ /**
401
+ * Returns the presence of the current user of the current room, and a function to update it.
402
+ * It is different from the setState function returned by the useState hook from React.
403
+ * You don't need to pass the full presence object to update it.
404
+ *
405
+ * @example
406
+ * const [myPresence, updateMyPresence] = useMyPresence();
407
+ * updateMyPresence({ x: 0 });
408
+ * updateMyPresence({ y: 0 });
409
+ *
410
+ * // At the next render, "myPresence" will be equal to "{ x: 0, y: 0 }"
411
+ */
412
+ useMyPresence(): [
413
+ P,
414
+ (patch: Partial<P>, options?: {
415
+ addToHistory: boolean;
416
+ }) => void
417
+ ];
418
+ /**
419
+ * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
420
+ * If you don't use the current user presence in your component, but you need to update it (e.g. live cursor), it's better to use useUpdateMyPresence to avoid unnecessary renders.
421
+ *
422
+ * @example
423
+ * const updateMyPresence = useUpdateMyPresence();
424
+ * updateMyPresence({ x: 0 });
425
+ * updateMyPresence({ y: 0 });
426
+ *
427
+ * // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
428
+ */
429
+ useUpdateMyPresence(): (patch: Partial<P>, options?: {
430
+ addToHistory: boolean;
431
+ }) => void;
432
+ /**
433
+ * Create a callback function that lets you mutate Liveblocks state.
434
+ *
435
+ * The first argument that gets passed into your callback will be
436
+ * a "mutation context", which exposes the following:
437
+ *
438
+ * - `root` - The mutable Storage root.
439
+ * You can normal mutation on Live structures with this, for
440
+ * example: root.get('layers').get('layer1').set('fill',
441
+ * 'red')
442
+ *
443
+ * - `setMyPresence` - Call this with a new (partial) Presence value.
444
+ *
445
+ * - `self` - A read-only version of the latest self, if you need it to
446
+ * compute the next state.
447
+ *
448
+ * - `others` - A read-only version of the latest others list, if you
449
+ * need it to compute the next state.
450
+ *
451
+ * useMutation is like React's useCallback, except that the first argument
452
+ * that gets passed into your callback will be a "mutation context".
453
+ *
454
+ * If you want get access to the immutable root somewhere in your mutation,
455
+ * you can use `root.ToImmutable()`.
456
+ *
457
+ * @example
458
+ * const fillLayers = useMutation(
459
+ * ({ root }, color: Color) => {
460
+ * ...
461
+ * },
462
+ * [],
463
+ * );
464
+ *
465
+ * fillLayers('red');
466
+ *
467
+ * const deleteLayers = useMutation(
468
+ * ({ root }) => {
469
+ * ...
470
+ * },
471
+ * [],
472
+ * );
473
+ *
474
+ * deleteLayers();
475
+ */
476
+ useMutation<F extends (context: MutationContext<P, S, U>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]): OmitFirstArg<F>;
477
+ /**
478
+ * Returns an object that lets you get information about all the users
479
+ * currently connected in the room.
480
+ *
481
+ * @example
482
+ * const others = useOthers();
483
+ *
484
+ * // Example to map all cursors in JSX
485
+ * return (
486
+ * <>
487
+ * {others.map((user) => {
488
+ * if (user.presence.cursor == null) {
489
+ * return null;
490
+ * }
491
+ * return <Cursor key={user.connectionId} cursor={user.presence.cursor} />
492
+ * })}
493
+ * </>
494
+ * )
495
+ */
496
+ useOthers(): readonly User<P, U>[];
497
+ /**
498
+ * Extract arbitrary data based on all the users currently connected in the
499
+ * room (except yourself).
500
+ *
501
+ * The selector function will get re-evaluated any time a user enters or
502
+ * leaves the room, as well as whenever their presence data changes.
503
+ *
504
+ * The component that uses this hook will automatically re-render if your
505
+ * selector function returns a different value from its previous run.
506
+ *
507
+ * By default `useOthers()` uses strict `===` to check for equality. Take
508
+ * extra care when returning a computed object or list, for example when you
509
+ * return the result of a .map() or .filter() call from the selector. In
510
+ * those cases, you'll probably want to use a `shallow` comparison check.
511
+ *
512
+ * @example
513
+ * const avatars = useOthers(users => users.map(u => u.info.avatar), shallow);
514
+ * const cursors = useOthers(users => users.map(u => u.presence.cursor), shallow);
515
+ * const someoneIsTyping = useOthers(users => users.some(u => u.presence.isTyping));
516
+ *
517
+ */
518
+ useOthers<T>(selector: (others: readonly User<P, U>[]) => T, isEqual?: (prev: T, curr: T) => boolean): T;
519
+ /**
520
+ * Returns an array of connection IDs. This matches the values you'll get by
521
+ * using the `useOthers()` hook.
522
+ *
523
+ * Roughly equivalent to:
524
+ * useOthers((others) => others.map(other => other.connectionId), shallow)
525
+ *
526
+ * This is useful in particular to implement efficiently rendering components
527
+ * for each user in the room, e.g. cursors.
528
+ *
529
+ * @example
530
+ * const ids = useOthersConnectionIds();
531
+ * // [2, 4, 7]
532
+ */
533
+ useOthersConnectionIds(): readonly number[];
534
+ /**
535
+ * Related to useOthers(), but optimized for selecting only "subsets" of
536
+ * others. This is useful for performance reasons in particular, because
537
+ * selecting only a subset of users also means limiting the number of
538
+ * re-renders that will be triggered.
539
+ *
540
+ * @example
541
+ * const avatars = useOthersMapped(user => user.info.avatar);
542
+ * // ^^^^^^^
543
+ * // { connectionId: number; data: string }[]
544
+ *
545
+ * The selector function you pass to useOthersMapped() is called an "item
546
+ * selector", and operates on a single user at a time. If you provide an
547
+ * (optional) "item comparison" function, it will be used to compare each
548
+ * item pairwise.
549
+ *
550
+ * For example, to select multiple properties:
551
+ *
552
+ * @example
553
+ * const avatarsAndCursors = useOthersMapped(
554
+ * user => [u.info.avatar, u.presence.cursor],
555
+ * shallow, // 👈
556
+ * );
557
+ */
558
+ useOthersMapped<T>(itemSelector: (other: User<P, U>) => T, itemIsEqual?: (prev: T, curr: T) => boolean): ReadonlyArray<readonly [connectionId: number, data: T]>;
559
+ /**
560
+ * Given a connection ID (as obtained by using `useOthersConnectionIds`), you
561
+ * can call this selector deep down in your component stack to only have the
562
+ * component re-render if properties for this particular user change.
563
+ *
564
+ * @example
565
+ * // Returns only the selected values re-renders whenever that selection changes)
566
+ * const { x, y } = useOther(2, user => user.presence.cursor);
567
+ */
568
+ useOther<T>(connectionId: number, selector: (other: User<P, U>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
569
+ /**
570
+ * Returns a function that creates a thread with an initial comment, and optionally some metadata.
571
+ *
572
+ * @example
573
+ * const createThread = useCreateThread();
574
+ * createThread({ body: {}, metadata: {} });
575
+ */
576
+ useCreateThread(): (options: CreateThreadOptions<M>) => ThreadData<M>;
577
+ /**
578
+ * Returns a function that edits a thread's metadata.
579
+ * To delete an existing metadata property, set its value to `null`.
580
+ *
581
+ * @example
582
+ * const editThreadMetadata = useEditThreadMetadata();
583
+ * editThreadMetadata({ threadId: "th_xxx", metadata: {} })
584
+ */
585
+ useEditThreadMetadata(): (options: EditThreadMetadataOptions<M>) => void;
586
+ /**
587
+ * Returns a function that adds a comment to a thread.
588
+ *
589
+ * @example
590
+ * const createComment = useCreateComment();
591
+ * createComment({ threadId: "th_xxx", body: {} });
592
+ */
593
+ useCreateComment(): (options: CreateCommentOptions) => CommentData;
594
+ /**
595
+ * Returns a function that edits a comment's body.
596
+ *
597
+ * @example
598
+ * const editComment = useEditComment()
599
+ * editComment({ threadId: "th_xxx", commentId: "cm_xxx", body: {} })
600
+ */
601
+ useEditComment(): (options: EditCommentOptions) => void;
602
+ /**
603
+ * Returns a function that deletes a comment.
604
+ * If it is the last non-deleted comment, the thread also gets deleted.
605
+ *
606
+ * @example
607
+ * const deleteComment = useDeleteComment();
608
+ * deleteComment({ threadId: "th_xxx", commentId: "cm_xxx" })
609
+ */
610
+ useDeleteComment(): (options: DeleteCommentOptions) => void;
611
+ /**
612
+ * Returns a function that adds a reaction from a comment.
613
+ *
614
+ * @example
615
+ * const addReaction = useAddReaction();
616
+ * addReaction({ threadId: "th_xxx", commentId: "cm_xxx", emoji: "👍" })
617
+ */
618
+ useAddReaction(): (options: CommentReactionOptions) => void;
619
+ /**
620
+ * Returns a function that removes a reaction on a comment.
621
+ *
622
+ * @example
623
+ * const removeReaction = useRemoveReaction();
624
+ * removeReaction({ threadId: "th_xxx", commentId: "cm_xxx", emoji: "👍" })
625
+ */
626
+ useRemoveReaction(): (options: CommentReactionOptions) => void;
627
+ /**
628
+ * @beta
629
+ *
630
+ * Returns a function that updates the user's notification settings
631
+ * for the current room.
632
+ *
633
+ * @example
634
+ * const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
635
+ * updateRoomNotificationSettings({ threads: "all" });
636
+ */
637
+ useUpdateRoomNotificationSettings(): (settings: Partial<RoomNotificationSettings>) => void;
638
+ /**
639
+ * Returns a function that marks a thread as read.
640
+ *
641
+ * @example
642
+ * const markThreadAsRead = useMarkThreadAsRead();
643
+ * markThreadAsRead("th_xxx");
644
+ */
645
+ useMarkThreadAsRead(): (threadId: string) => void;
646
+ /**
647
+ * Returns the subscription status of a thread.
648
+ *
649
+ * @example
650
+ * const { status, unreadSince } = useThreadSubscription("th_xxx");
651
+ */
652
+ useThreadSubscription(threadId: string): ThreadSubscription;
653
+ };
654
+ declare type RoomContextBundle<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta, E extends Json, M extends BaseMetadata> = Resolve<RoomContextBundleCommon<P, S, U, E, M> & SharedContextBundle<U>["classic"] & {
655
+ /**
656
+ * Extract arbitrary data from the Liveblocks Storage state, using an
657
+ * arbitrary selector function.
658
+ *
659
+ * The selector function will get re-evaluated any time something changes in
660
+ * Storage. The value returned by your selector function will also be the
661
+ * value returned by the hook.
662
+ *
663
+ * The `root` value that gets passed to your selector function is
664
+ * a immutable/readonly version of your Liveblocks storage root.
665
+ *
666
+ * The component that uses this hook will automatically re-render if the
667
+ * returned value changes.
668
+ *
669
+ * By default `useStorage()` uses strict `===` to check for equality. Take
670
+ * extra care when returning a computed object or list, for example when you
671
+ * return the result of a .map() or .filter() call from the selector. In
672
+ * those cases, you'll probably want to use a `shallow` comparison check.
673
+ */
674
+ useStorage<T>(selector: (root: ToImmutable<S>) => T, isEqual?: (prev: T | null, curr: T | null) => boolean): T | null;
675
+ /**
676
+ * Gets the current user once it is connected to the room.
677
+ *
678
+ * @example
679
+ * const me = useSelf();
680
+ * const { x, y } = me.presence.cursor;
681
+ */
682
+ useSelf(): User<P, U> | null;
683
+ /**
684
+ * Extract arbitrary data based on the current user.
685
+ *
686
+ * The selector function will get re-evaluated any time your presence data
687
+ * changes.
688
+ *
689
+ * The component that uses this hook will automatically re-render if your
690
+ * selector function returns a different value from its previous run.
691
+ *
692
+ * By default `useSelf()` uses strict `===` to check for equality. Take extra
693
+ * care when returning a computed object or list, for example when you return
694
+ * the result of a .map() or .filter() call from the selector. In those
695
+ * cases, you'll probably want to use a `shallow` comparison check.
696
+ *
697
+ * Will return `null` while Liveblocks isn't connected to a room yet.
698
+ *
699
+ * @example
700
+ * const cursor = useSelf(me => me.presence.cursor);
701
+ * if (cursor !== null) {
702
+ * const { x, y } = cursor;
703
+ * }
704
+ *
705
+ */
706
+ useSelf<T>(selector: (me: User<P, U>) => T, isEqual?: (prev: T, curr: T) => boolean): T | null;
707
+ /**
708
+ * Returns the threads within the current room.
709
+ *
710
+ * @example
711
+ * const { threads, error, isLoading } = useThreads();
712
+ */
713
+ useThreads(options?: UseThreadsOptions<M>): ThreadsState<M>;
714
+ /**
715
+ * @beta
716
+ *
717
+ * Returns the user's notification settings for the current room
718
+ * and a function to update them.
719
+ *
720
+ * @example
721
+ * const [{ settings }, updateSettings] = useRoomNotificationSettings();
722
+ */
723
+ useRoomNotificationSettings(): [
724
+ RoomNotificationSettingsState,
725
+ (settings: Partial<RoomNotificationSettings>) => void
726
+ ];
727
+ suspense: Resolve<RoomContextBundleCommon<P, S, U, E, M> & SharedContextBundle<U>["suspense"] & {
728
+ /**
729
+ * Extract arbitrary data from the Liveblocks Storage state, using an
730
+ * arbitrary selector function.
731
+ *
732
+ * The selector function will get re-evaluated any time something changes in
733
+ * Storage. The value returned by your selector function will also be the
734
+ * value returned by the hook.
735
+ *
736
+ * The `root` value that gets passed to your selector function is
737
+ * a immutable/readonly version of your Liveblocks storage root.
738
+ *
739
+ * The component that uses this hook will automatically re-render if the
740
+ * returned value changes.
741
+ *
742
+ * By default `useStorage()` uses strict `===` to check for equality. Take
743
+ * extra care when returning a computed object or list, for example when you
744
+ * return the result of a .map() or .filter() call from the selector. In
745
+ * those cases, you'll probably want to use a `shallow` comparison check.
746
+ */
747
+ useStorage<T>(selector: (root: ToImmutable<S>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
748
+ /**
749
+ * Gets the current user once it is connected to the room.
750
+ *
751
+ * @example
752
+ * const me = useSelf();
753
+ * const { x, y } = me.presence.cursor;
754
+ */
755
+ useSelf(): User<P, U>;
756
+ /**
757
+ * Extract arbitrary data based on the current user.
758
+ *
759
+ * The selector function will get re-evaluated any time your presence data
760
+ * changes.
761
+ *
762
+ * The component that uses this hook will automatically re-render if your
763
+ * selector function returns a different value from its previous run.
764
+ *
765
+ * By default `useSelf()` uses strict `===` to check for equality. Take extra
766
+ * care when returning a computed object or list, for example when you return
767
+ * the result of a .map() or .filter() call from the selector. In those
768
+ * cases, you'll probably want to use a `shallow` comparison check.
769
+ *
770
+ * Will return `null` while Liveblocks isn't connected to a room yet.
771
+ *
772
+ * @example
773
+ * const cursor = useSelf(me => me.presence.cursor);
774
+ * if (cursor !== null) {
775
+ * const { x, y } = cursor;
776
+ * }
777
+ *
778
+ */
779
+ useSelf<T>(selector: (me: User<P, U>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
780
+ /**
781
+ * Returns the threads within the current room.
782
+ *
783
+ * @example
784
+ * const { threads } = useThreads();
785
+ */
786
+ useThreads(options?: UseThreadsOptions<M>): ThreadsStateSuccess<M>;
787
+ /**
788
+ * @beta
789
+ *
790
+ * Returns the user's notification settings for the current room
791
+ * and a function to update them.
792
+ *
793
+ * @example
794
+ * const [{ settings }, updateSettings] = useRoomNotificationSettings();
795
+ */
796
+ useRoomNotificationSettings(): [
797
+ RoomNotificationSettingsStateSuccess,
798
+ (settings: Partial<RoomNotificationSettings>) => void
799
+ ];
800
+ }>;
801
+ }>;
802
+ /**
803
+ * Properties that are the same in LiveblocksContext and LiveblocksContext["suspense"].
804
+ */
805
+ declare type LiveblocksContextBundleCommon<M extends BaseMetadata> = {
806
+ /**
807
+ * Makes Liveblocks features outside of rooms (e.g. Notifications) available
808
+ * in the component hierarchy below.
809
+ */
810
+ LiveblocksProvider(props: PropsWithChildren): JSX.Element;
811
+ /**
812
+ * @beta
813
+ *
814
+ * Returns a function that marks an inbox notification as read.
815
+ *
816
+ * @example
817
+ * const markInboxNotificationAsRead = useMarkInboxNotificationAsRead();
818
+ * markInboxNotificationAsRead("in_xxx");
819
+ */
820
+ useMarkInboxNotificationAsRead(): (inboxNotificationId: string) => void;
821
+ /**
822
+ * @beta
823
+ *
824
+ * Returns a function that marks all inbox notifications as read.
825
+ *
826
+ * @example
827
+ * const markAllInboxNotificationsAsRead = useMarkAllInboxNotificationsAsRead();
828
+ * markAllInboxNotificationsAsRead();
829
+ */
830
+ useMarkAllInboxNotificationsAsRead(): () => void;
831
+ /**
832
+ * @beta
833
+ *
834
+ * Returns the thread associated with a `"thread"` inbox notification.
835
+ *
836
+ * @example
837
+ * const thread = useInboxNotificationThread("in_xxx");
838
+ */
839
+ useInboxNotificationThread(inboxNotificationId: string): ThreadData<M>;
840
+ };
841
+ declare type LiveblocksContextBundle<U extends BaseUserMeta, M extends BaseMetadata> = Resolve<LiveblocksContextBundleCommon<M> & SharedContextBundle<U>["classic"] & {
842
+ /**
843
+ * @beta
844
+ *
845
+ * Returns the inbox notifications for the current user.
846
+ *
847
+ * @example
848
+ * const { inboxNotifications, error, isLoading } = useInboxNotifications();
849
+ */
850
+ useInboxNotifications(): InboxNotificationsState;
851
+ /**
852
+ * @beta
853
+ *
854
+ * Returns the number of unread inbox notifications for the current user.
855
+ *
856
+ * @example
857
+ * const { count, error, isLoading } = useUnreadInboxNotificationsCount();
858
+ */
859
+ useUnreadInboxNotificationsCount(): UnreadInboxNotificationsCountState;
860
+ suspense: Resolve<LiveblocksContextBundleCommon<M> & SharedContextBundle<U>["suspense"] & {
861
+ /**
862
+ * @beta
863
+ *
864
+ * Returns the inbox notifications for the current user.
865
+ *
866
+ * @example
867
+ * const { inboxNotifications } = useInboxNotifications();
868
+ */
869
+ useInboxNotifications(): InboxNotificationsStateSuccess;
870
+ /**
871
+ * @beta
872
+ *
873
+ * Returns the number of unread inbox notifications for the current user.
874
+ *
875
+ * @example
876
+ * const { count } = useUnreadInboxNotificationsCount();
877
+ */
878
+ useUnreadInboxNotificationsCount(): UnreadInboxNotificationsCountStateSuccess;
879
+ }>;
880
+ }>;
881
+
882
+ declare const ClientContext: React__default.Context<OpaqueClient | null>;
883
+ /**
884
+ * Obtains a reference to the current Liveblocks client.
885
+ */
886
+ declare function useClient<U extends BaseUserMeta>(): Client<U>;
887
+ declare function LiveblocksProvider<U extends BaseUserMeta = DU>(props: PropsWithChildren<ClientOptions<U>>): React__default.JSX.Element;
888
+ declare function createLiveblocksContext<U extends BaseUserMeta = DU, M extends BaseMetadata$1 = DM>(client: OpaqueClient): LiveblocksContextBundle<U, M>;
889
+ declare function useInboxNotifications(): InboxNotificationsState;
890
+ declare function useInboxNotificationsSuspense(): InboxNotificationsStateSuccess;
891
+ declare function useMarkAllInboxNotificationsAsRead(): () => void;
892
+ declare function useMarkInboxNotificationAsRead(): (inboxNotificationId: string) => void;
893
+ declare function useUnreadInboxNotificationsCount(): UnreadInboxNotificationsCountState;
894
+ declare function useUnreadInboxNotificationsCountSuspense(): UnreadInboxNotificationsCountStateSuccess;
895
+ declare function useRoomInfo(roomId: string): RoomInfoState;
896
+ declare function useRoomInfoSuspense(roomId: string): RoomInfoStateSuccess;
897
+ declare const __1: LiveblocksContextBundle<DU, DM>["useInboxNotificationThread"];
898
+ declare const __2: LiveblocksContextBundle<DU, DM>["useUser"];
899
+ declare const __3: LiveblocksContextBundle<DU, DM>["suspense"]["useUser"];
900
+
901
+ declare const RoomContext: React$1.Context<OpaqueRoom | null>;
902
+ declare function useStatus(): Status;
903
+ declare function useBatch<T>(): (callback: () => T) => T;
904
+ declare function useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
905
+ declare function useErrorListener(callback: (err: LiveblocksError) => void): void;
906
+ declare function useHistory(): History;
907
+ declare function useUndo(): () => void;
908
+ declare function useRedo(): () => void;
909
+ declare function useCanUndo(): boolean;
910
+ declare function useCanRedo(): boolean;
911
+ declare function useOthersConnectionIds(): readonly number[];
912
+ declare function useCreateComment(): (options: CreateCommentOptions) => CommentData;
913
+ declare function useEditComment(): (options: EditCommentOptions) => void;
914
+ declare function useDeleteComment(): ({ threadId, commentId }: DeleteCommentOptions) => void;
915
+ declare function useRemoveReaction(): ({ threadId, commentId, emoji }: CommentReactionOptions) => void;
916
+ declare function useMarkThreadAsRead(): (threadId: string) => void;
917
+ declare function useThreadSubscription(threadId: string): ThreadSubscription;
918
+ declare function useRoomNotificationSettings(): [
919
+ RoomNotificationSettingsState,
920
+ (settings: Partial<RoomNotificationSettings$1>) => void
921
+ ];
922
+ declare function useUpdateRoomNotificationSettings(): (settings: Partial<RoomNotificationSettings$1>) => void;
923
+ declare function useOthersConnectionIdsSuspense(): readonly number[];
924
+ declare function createRoomContext<P extends JsonObject = DP, S extends LsonObject = DS, U extends BaseUserMeta = DU, E extends Json = DE, M extends BaseMetadata$1 = DM>(client: OpaqueClient): RoomContextBundle<P, S, U, E, M>;
925
+ declare type DefaultRoomContextBundle = RoomContextBundle<DP, DS, DU, DE, DM>;
926
+ declare const _RoomProvider: DefaultRoomContextBundle["RoomProvider"];
927
+ declare const _useBroadcastEvent: DefaultRoomContextBundle["useBroadcastEvent"];
928
+ declare const _useOthersListener: DefaultRoomContextBundle["useOthersListener"];
929
+ declare const _useRoom: DefaultRoomContextBundle["useRoom"];
930
+ declare const _useAddReaction: DefaultRoomContextBundle["useAddReaction"];
931
+ declare const _useMutation: DefaultRoomContextBundle["useMutation"];
932
+ declare const _useCreateThread: DefaultRoomContextBundle["useCreateThread"];
933
+ declare const _useEditThreadMetadata: DefaultRoomContextBundle["useEditThreadMetadata"];
934
+ declare const _useEventListener: DefaultRoomContextBundle["useEventListener"];
935
+ declare const _useMyPresence: DefaultRoomContextBundle["useMyPresence"];
936
+ declare const _useOthersMapped: DefaultRoomContextBundle["useOthersMapped"];
937
+ declare const _useOthersMappedSuspense: DefaultRoomContextBundle["suspense"]["useOthersMapped"];
938
+ declare const _useThreads: DefaultRoomContextBundle["useThreads"];
939
+ declare const _useThreadsSuspense: DefaultRoomContextBundle["suspense"]["useThreads"];
940
+ declare const _useOther: DefaultRoomContextBundle["useOther"];
941
+ declare const _useOthers: DefaultRoomContextBundle["useOthers"];
942
+ declare const _useOtherSuspense: DefaultRoomContextBundle["suspense"]["useOther"];
943
+ declare const _useOthersSuspense: DefaultRoomContextBundle["suspense"]["useOthers"];
944
+ declare const _useStorage: DefaultRoomContextBundle["useStorage"];
945
+ declare const _useStorageSuspense: DefaultRoomContextBundle["suspense"]["useStorage"];
946
+ declare const _useSelf: DefaultRoomContextBundle["useSelf"];
947
+ declare const _useSelfSuspense: DefaultRoomContextBundle["suspense"]["useSelf"];
948
+ declare const _useStorageRoot: DefaultRoomContextBundle["useStorageRoot"];
949
+ declare const _useUpdateMyPresence: DefaultRoomContextBundle["useUpdateMyPresence"];
950
+
951
+ export { _useOthersSuspense as $, useRemoveReaction as A, _useRoom as B, ClientSideSuspense as C, useRoomNotificationSettings as D, useStatus as E, _useStorageRoot as F, useThreadSubscription as G, useUndo as H, _useUpdateMyPresence as I, useUpdateRoomNotificationSettings as J, _useOther as K, LiveblocksProvider as L, type MutationContext as M, _useOthers as N, useOthersConnectionIds as O, _useOthersMapped as P, _useSelf as Q, RoomContext as R, _useStorage as S, _useThreads as T, type UseThreadsOptions as U, useInboxNotifications as V, useRoomInfo as W, useUnreadInboxNotificationsCount as X, __2 as Y, _useOtherSuspense as Z, __1 as _, ClientContext as a, useOthersConnectionIdsSuspense as a0, _useOthersMappedSuspense as a1, _useSelfSuspense as a2, _useStorageSuspense as a3, _useThreadsSuspense as a4, useInboxNotificationsSuspense as a5, useRoomInfoSuspense as a6, useUnreadInboxNotificationsCountSuspense as a7, __3 as a8, useMarkAllInboxNotificationsAsRead as b, createLiveblocksContext as c, useMarkInboxNotificationAsRead as d, createRoomContext as e, _RoomProvider as f, _useAddReaction as g, useBatch as h, _useBroadcastEvent as i, useCanRedo as j, useCanUndo as k, useCreateComment as l, _useCreateThread as m, useDeleteComment as n, useEditComment as o, _useEditThreadMetadata as p, useErrorListener as q, _useEventListener as r, useHistory as s, useLostConnectionListener as t, useClient as u, useMarkThreadAsRead as v, _useMutation as w, _useMyPresence as x, _useOthersListener as y, useRedo as z };