stream-chat-react 13.5.1 → 13.6.1
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.
- package/dist/components/Channel/Channel.d.ts +1 -1
- package/dist/components/Channel/Channel.js +2 -0
- package/dist/components/Chat/Chat.d.ts +1 -1
- package/dist/components/Chat/Chat.js +3 -1
- package/dist/components/Chat/hooks/useChat.js +1 -1
- package/dist/components/Dialog/DialogManager.d.ts +3 -1
- package/dist/components/Dialog/DialogManager.js +3 -0
- package/dist/components/Dialog/DialogPortal.d.ts +1 -1
- package/dist/components/Dialog/DialogPortal.js +4 -2
- package/dist/components/Dialog/hooks/useDialog.d.ts +11 -3
- package/dist/components/Dialog/hooks/useDialog.js +10 -7
- package/dist/components/Gallery/Gallery.js +2 -2
- package/dist/components/Gallery/Image.js +11 -5
- package/dist/components/Message/utils.js +2 -2
- package/dist/components/MessageBounce/MessageBounceModal.js +3 -2
- package/dist/components/MessageInput/AttachmentSelector.js +2 -1
- package/dist/components/MessageInput/EditMessageForm.js +2 -2
- package/dist/components/Modal/GlobalModal.d.ts +4 -0
- package/dist/components/Modal/GlobalModal.js +57 -0
- package/dist/components/Modal/Modal.d.ts +3 -4
- package/dist/components/Modal/index.d.ts +1 -0
- package/dist/components/Modal/index.js +1 -0
- package/dist/components/Poll/PollActions/PollAction.js +8 -4
- package/dist/components/Poll/PollActions/PollActions.js +8 -6
- package/dist/components/Reactions/ReactionsListModal.d.ts +1 -1
- package/dist/components/Reactions/ReactionsListModal.js +3 -2
- package/dist/components/TextareaComposer/TextareaComposer.js +15 -24
- package/dist/context/ComponentContext.d.ts +3 -1
- package/dist/context/DialogManagerContext.d.ts +21 -4
- package/dist/context/DialogManagerContext.js +114 -5
- package/dist/css/v2/index.css +1 -1
- package/dist/css/v2/index.layout.css +1 -1
- package/dist/experimental/index.browser.cjs +94 -22
- package/dist/experimental/index.browser.cjs.map +4 -4
- package/dist/experimental/index.node.cjs +94 -22
- package/dist/experimental/index.node.cjs.map +4 -4
- package/dist/index.browser.cjs +1767 -1545
- package/dist/index.browser.cjs.map +4 -4
- package/dist/index.node.cjs +1774 -1545
- package/dist/index.node.cjs.map +4 -4
- package/dist/scss/v2/Modal/Modal-theme.scss +21 -6
- package/dist/scss/v2/Poll/Poll-layout.scss +20 -6
- package/dist/scss/v2/Poll/Poll-theme.scss +8 -8
- package/package.json +4 -4
|
@@ -380,6 +380,7 @@ var useComponentContext = (_componentName) => (0, import_react4.useContext)(Comp
|
|
|
380
380
|
|
|
381
381
|
// src/context/DialogManagerContext.tsx
|
|
382
382
|
var import_react9 = __toESM(require("react"));
|
|
383
|
+
var import_stream_chat = require("stream-chat");
|
|
383
384
|
|
|
384
385
|
// src/components/Dialog/DialogPortal.tsx
|
|
385
386
|
var import_react8 = __toESM(require("react"));
|
|
@@ -427,8 +428,8 @@ function useStateStore(store, selector2) {
|
|
|
427
428
|
}
|
|
428
429
|
|
|
429
430
|
// src/components/Dialog/hooks/useDialog.ts
|
|
430
|
-
var useDialog = ({ id }) => {
|
|
431
|
-
const { dialogManager } = useDialogManager();
|
|
431
|
+
var useDialog = ({ dialogManagerId, id }) => {
|
|
432
|
+
const { dialogManager } = useDialogManager({ dialogManagerId });
|
|
432
433
|
(0, import_react6.useEffect)(
|
|
433
434
|
() => () => {
|
|
434
435
|
dialogManager.markForRemoval(id);
|
|
@@ -437,8 +438,8 @@ var useDialog = ({ id }) => {
|
|
|
437
438
|
);
|
|
438
439
|
return dialogManager.getOrCreate({ id });
|
|
439
440
|
};
|
|
440
|
-
var useDialogIsOpen = (id) => {
|
|
441
|
-
const { dialogManager } = useDialogManager();
|
|
441
|
+
var useDialogIsOpen = (id, dialogManagerId) => {
|
|
442
|
+
const { dialogManager } = useDialogManager({ dialogManagerId });
|
|
442
443
|
const dialogIsOpenSelector = (0, import_react6.useCallback)(
|
|
443
444
|
({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }),
|
|
444
445
|
[id]
|
|
@@ -469,8 +470,8 @@ var DialogPortalEntry = ({
|
|
|
469
470
|
children,
|
|
470
471
|
dialogId
|
|
471
472
|
}) => {
|
|
472
|
-
const { dialogManager } = useDialogManager();
|
|
473
|
-
const dialogIsOpen = useDialogIsOpen(dialogId);
|
|
473
|
+
const { dialogManager } = useDialogManager({ dialogId });
|
|
474
|
+
const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager.id);
|
|
474
475
|
const getPortalDestination = (0, import_react8.useCallback)(
|
|
475
476
|
() => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`),
|
|
476
477
|
[dialogManager.id]
|
|
@@ -479,10 +480,83 @@ var DialogPortalEntry = ({
|
|
|
479
480
|
};
|
|
480
481
|
|
|
481
482
|
// src/context/DialogManagerContext.tsx
|
|
483
|
+
var dialogManagersRegistry = new import_stream_chat.StateStore({});
|
|
482
484
|
var DialogManagerProviderContext = import_react9.default.createContext(void 0);
|
|
483
|
-
var
|
|
484
|
-
|
|
485
|
-
|
|
485
|
+
var getManagerFromStore = ({
|
|
486
|
+
dialogId,
|
|
487
|
+
dialogManagerId,
|
|
488
|
+
newState,
|
|
489
|
+
previousState
|
|
490
|
+
}) => {
|
|
491
|
+
let managerInNewState;
|
|
492
|
+
let managerInPrevState;
|
|
493
|
+
if (dialogManagerId) {
|
|
494
|
+
if (!dialogId) {
|
|
495
|
+
managerInNewState = newState[dialogManagerId];
|
|
496
|
+
managerInPrevState = previousState?.[dialogManagerId];
|
|
497
|
+
} else {
|
|
498
|
+
if (newState[dialogManagerId]?.get(dialogId)) {
|
|
499
|
+
managerInNewState = newState[dialogManagerId];
|
|
500
|
+
}
|
|
501
|
+
if (previousState?.[dialogManagerId]?.get(dialogId)) {
|
|
502
|
+
managerInPrevState = previousState[dialogManagerId];
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
} else if (dialogId) {
|
|
506
|
+
managerInNewState = Object.values(newState).find(
|
|
507
|
+
(dialogMng) => dialogId && dialogMng?.get(dialogId)
|
|
508
|
+
);
|
|
509
|
+
managerInPrevState = previousState && Object.values(previousState).find(
|
|
510
|
+
(dialogMng) => dialogId && dialogMng?.get(dialogId)
|
|
511
|
+
);
|
|
512
|
+
}
|
|
513
|
+
return { managerInNewState, managerInPrevState };
|
|
514
|
+
};
|
|
515
|
+
var useDialogManager = ({
|
|
516
|
+
dialogId,
|
|
517
|
+
dialogManagerId
|
|
518
|
+
} = {}) => {
|
|
519
|
+
const nearestDialogManagerContext = (0, import_react9.useContext)(DialogManagerProviderContext);
|
|
520
|
+
const [dialogManagerContext, setDialogManagerContext] = (0, import_react9.useState)(() => {
|
|
521
|
+
const { managerInNewState } = getManagerFromStore({
|
|
522
|
+
dialogId,
|
|
523
|
+
dialogManagerId,
|
|
524
|
+
newState: dialogManagersRegistry.getLatestValue(),
|
|
525
|
+
previousState: void 0
|
|
526
|
+
});
|
|
527
|
+
return managerInNewState ? { dialogManager: managerInNewState } : nearestDialogManagerContext;
|
|
528
|
+
});
|
|
529
|
+
(0, import_react9.useEffect)(() => {
|
|
530
|
+
if (!dialogId && !dialogManagerId) return;
|
|
531
|
+
const unsubscribe = dialogManagersRegistry.subscribeWithSelector(
|
|
532
|
+
(state) => state,
|
|
533
|
+
(newState, previousState) => {
|
|
534
|
+
const { managerInNewState, managerInPrevState } = getManagerFromStore({
|
|
535
|
+
dialogId,
|
|
536
|
+
dialogManagerId,
|
|
537
|
+
newState,
|
|
538
|
+
previousState
|
|
539
|
+
});
|
|
540
|
+
if (!managerInPrevState || managerInNewState?.id !== managerInPrevState.id) {
|
|
541
|
+
setDialogManagerContext((prevState) => {
|
|
542
|
+
if (prevState?.dialogManager.id === managerInNewState?.id) return prevState;
|
|
543
|
+
return {
|
|
544
|
+
dialogManager: managerInNewState || nearestDialogManagerContext?.dialogManager
|
|
545
|
+
};
|
|
546
|
+
});
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
);
|
|
550
|
+
return () => {
|
|
551
|
+
unsubscribe();
|
|
552
|
+
};
|
|
553
|
+
}, [dialogId, dialogManagerId, nearestDialogManagerContext?.dialogManager]);
|
|
554
|
+
if (!dialogManagerContext?.dialogManager) {
|
|
555
|
+
console.warn(
|
|
556
|
+
`Dialog manager (manager id: ${dialogManagerId}, dialog id: ${dialogId}) is not available`
|
|
557
|
+
);
|
|
558
|
+
}
|
|
559
|
+
return dialogManagerContext;
|
|
486
560
|
};
|
|
487
561
|
|
|
488
562
|
// src/context/MessageContext.tsx
|
|
@@ -530,7 +604,7 @@ var useTranslationContext = (componentName) => {
|
|
|
530
604
|
|
|
531
605
|
// src/components/MessageInput/hooks/useMessageComposer.ts
|
|
532
606
|
var import_react37 = require("react");
|
|
533
|
-
var
|
|
607
|
+
var import_stream_chat2 = require("stream-chat");
|
|
534
608
|
|
|
535
609
|
// src/components/Threads/ThreadContext.tsx
|
|
536
610
|
var import_react12 = __toESM(require("react"));
|
|
@@ -10846,13 +10920,6 @@ var useMessageReminder = (messageId) => {
|
|
|
10846
10920
|
return reminder;
|
|
10847
10921
|
};
|
|
10848
10922
|
|
|
10849
|
-
// src/components/MessageActions/MessageActions.tsx
|
|
10850
|
-
var import_clsx6 = __toESM(require("clsx"));
|
|
10851
|
-
var import_react30 = __toESM(require("react"));
|
|
10852
|
-
|
|
10853
|
-
// src/components/MessageActions/RemindMeSubmenu.tsx
|
|
10854
|
-
var import_react28 = __toESM(require("react"));
|
|
10855
|
-
|
|
10856
10923
|
// src/components/Dialog/ButtonWithSubmenu.tsx
|
|
10857
10924
|
var import_clsx5 = __toESM(require("clsx"));
|
|
10858
10925
|
var import_react27 = __toESM(require("react"));
|
|
@@ -11065,7 +11132,12 @@ var ButtonWithSubmenu = ({
|
|
|
11065
11132
|
));
|
|
11066
11133
|
};
|
|
11067
11134
|
|
|
11135
|
+
// src/components/MessageActions/MessageActions.tsx
|
|
11136
|
+
var import_clsx6 = __toESM(require("clsx"));
|
|
11137
|
+
var import_react30 = __toESM(require("react"));
|
|
11138
|
+
|
|
11068
11139
|
// src/components/MessageActions/RemindMeSubmenu.tsx
|
|
11140
|
+
var import_react28 = __toESM(require("react"));
|
|
11069
11141
|
var RemindMeActionButton = ({
|
|
11070
11142
|
className,
|
|
11071
11143
|
isMine
|
|
@@ -11563,7 +11635,7 @@ var InfiniteScrollPaginator = (props) => {
|
|
|
11563
11635
|
};
|
|
11564
11636
|
|
|
11565
11637
|
// src/components/MessageInput/hooks/useMessageComposer.ts
|
|
11566
|
-
var queueCache = new
|
|
11638
|
+
var queueCache = new import_stream_chat2.FixedSizeQueueCache(64);
|
|
11567
11639
|
var useMessageComposer = () => {
|
|
11568
11640
|
const { client } = useChatContext();
|
|
11569
11641
|
const { channel } = useChannelStateContext();
|
|
@@ -11580,10 +11652,10 @@ var useMessageComposer = () => {
|
|
|
11580
11652
|
}, [parentMessage?.id]);
|
|
11581
11653
|
const messageComposer = (0, import_react37.useMemo)(() => {
|
|
11582
11654
|
if (editing && cachedEditedMessage) {
|
|
11583
|
-
const tag =
|
|
11655
|
+
const tag = import_stream_chat2.MessageComposer.constructTag(cachedEditedMessage);
|
|
11584
11656
|
const cachedComposer = queueCache.get(tag);
|
|
11585
11657
|
if (cachedComposer) return cachedComposer;
|
|
11586
|
-
return new
|
|
11658
|
+
return new import_stream_chat2.MessageComposer({
|
|
11587
11659
|
client,
|
|
11588
11660
|
composition: cachedEditedMessage,
|
|
11589
11661
|
compositionContext: cachedEditedMessage
|
|
@@ -11595,10 +11667,10 @@ var useMessageComposer = () => {
|
|
|
11595
11667
|
...cachedParentMessage,
|
|
11596
11668
|
legacyThreadId: cachedParentMessage.id
|
|
11597
11669
|
};
|
|
11598
|
-
const tag =
|
|
11670
|
+
const tag = import_stream_chat2.MessageComposer.constructTag(compositionContext);
|
|
11599
11671
|
const cachedComposer = queueCache.get(tag);
|
|
11600
11672
|
if (cachedComposer) return cachedComposer;
|
|
11601
|
-
return new
|
|
11673
|
+
return new import_stream_chat2.MessageComposer({
|
|
11602
11674
|
client,
|
|
11603
11675
|
compositionContext
|
|
11604
11676
|
});
|