stream-chat-react 13.5.0 → 13.6.0
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/ChannelList/hooks/useChannelListShape.js +0 -4
- 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/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/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 +1756 -1535
- package/dist/index.browser.cjs.map +4 -4
- package/dist/index.node.cjs +1763 -1535
- 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 +2 -2
|
@@ -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"));
|
|
@@ -12716,13 +12790,6 @@ var useMessageReminder = (messageId) => {
|
|
|
12716
12790
|
return reminder;
|
|
12717
12791
|
};
|
|
12718
12792
|
|
|
12719
|
-
// src/components/MessageActions/MessageActions.tsx
|
|
12720
|
-
var import_clsx6 = __toESM(require("clsx"));
|
|
12721
|
-
var import_react30 = __toESM(require("react"));
|
|
12722
|
-
|
|
12723
|
-
// src/components/MessageActions/RemindMeSubmenu.tsx
|
|
12724
|
-
var import_react28 = __toESM(require("react"));
|
|
12725
|
-
|
|
12726
12793
|
// src/components/Dialog/ButtonWithSubmenu.tsx
|
|
12727
12794
|
var import_clsx5 = __toESM(require("clsx"));
|
|
12728
12795
|
var import_react27 = __toESM(require("react"));
|
|
@@ -12935,7 +13002,12 @@ var ButtonWithSubmenu = ({
|
|
|
12935
13002
|
));
|
|
12936
13003
|
};
|
|
12937
13004
|
|
|
13005
|
+
// src/components/MessageActions/MessageActions.tsx
|
|
13006
|
+
var import_clsx6 = __toESM(require("clsx"));
|
|
13007
|
+
var import_react30 = __toESM(require("react"));
|
|
13008
|
+
|
|
12938
13009
|
// src/components/MessageActions/RemindMeSubmenu.tsx
|
|
13010
|
+
var import_react28 = __toESM(require("react"));
|
|
12939
13011
|
var RemindMeActionButton = ({
|
|
12940
13012
|
className,
|
|
12941
13013
|
isMine
|
|
@@ -13433,7 +13505,7 @@ var InfiniteScrollPaginator = (props) => {
|
|
|
13433
13505
|
};
|
|
13434
13506
|
|
|
13435
13507
|
// src/components/MessageInput/hooks/useMessageComposer.ts
|
|
13436
|
-
var queueCache = new
|
|
13508
|
+
var queueCache = new import_stream_chat2.FixedSizeQueueCache(64);
|
|
13437
13509
|
var useMessageComposer = () => {
|
|
13438
13510
|
const { client } = useChatContext();
|
|
13439
13511
|
const { channel } = useChannelStateContext();
|
|
@@ -13450,10 +13522,10 @@ var useMessageComposer = () => {
|
|
|
13450
13522
|
}, [parentMessage?.id]);
|
|
13451
13523
|
const messageComposer = (0, import_react37.useMemo)(() => {
|
|
13452
13524
|
if (editing && cachedEditedMessage) {
|
|
13453
|
-
const tag =
|
|
13525
|
+
const tag = import_stream_chat2.MessageComposer.constructTag(cachedEditedMessage);
|
|
13454
13526
|
const cachedComposer = queueCache.get(tag);
|
|
13455
13527
|
if (cachedComposer) return cachedComposer;
|
|
13456
|
-
return new
|
|
13528
|
+
return new import_stream_chat2.MessageComposer({
|
|
13457
13529
|
client,
|
|
13458
13530
|
composition: cachedEditedMessage,
|
|
13459
13531
|
compositionContext: cachedEditedMessage
|
|
@@ -13465,10 +13537,10 @@ var useMessageComposer = () => {
|
|
|
13465
13537
|
...cachedParentMessage,
|
|
13466
13538
|
legacyThreadId: cachedParentMessage.id
|
|
13467
13539
|
};
|
|
13468
|
-
const tag =
|
|
13540
|
+
const tag = import_stream_chat2.MessageComposer.constructTag(compositionContext);
|
|
13469
13541
|
const cachedComposer = queueCache.get(tag);
|
|
13470
13542
|
if (cachedComposer) return cachedComposer;
|
|
13471
|
-
return new
|
|
13543
|
+
return new import_stream_chat2.MessageComposer({
|
|
13472
13544
|
client,
|
|
13473
13545
|
compositionContext
|
|
13474
13546
|
});
|