stream-chat-react 12.9.0 → 12.11.0

package/dist/experimental/index.node.cjs

@@ -44,9 +44,7 @@ var import_react25 = __toESM(require("react"));
 
 // src/context/ChannelActionContext.tsx
 var import_react = __toESM(require("react"));
-var ChannelActionContext = import_react.default.createContext(
-  void 0
-);
+var ChannelActionContext = import_react.default.createContext(void 0);
 var useChannelActionContext = (componentName) => {
   const contextValue = (0, import_react.useContext)(ChannelActionContext);
   if (!contextValue) {
@@ -60,9 +58,7 @@ var useChannelActionContext = (componentName) => {
 
 // src/context/ChannelStateContext.tsx
 var import_react2 = __toESM(require("react"));
-var ChannelStateContext = import_react2.default.createContext(
-  void 0
-);
+var ChannelStateContext = import_react2.default.createContext(void 0);
 var useChannelStateContext = (componentName) => {
   const contextValue = (0, import_react2.useContext)(ChannelStateContext);
   if (!contextValue) {
@@ -104,16 +100,40 @@ var import_react6 = require("react");
 
 // src/store/hooks/useStateStore.ts
 var import_react5 = require("react");
+var import_shim = require("use-sync-external-store/shim");
+var noop = () => {
+};
 function useStateStore(store, selector) {
-  const [state, setState] = (0, import_react5.useState)(() => {
-    if (!store) return void 0;
-    return selector(store.getLatestValue());
-  });
-  (0, import_react5.useEffect)(() => {
-    if (!store) return;
-    const unsubscribe = store.subscribeWithSelector(selector, setState);
-    return unsubscribe;
+  const wrappedSubscription = (0, import_react5.useCallback)(
+    (onStoreChange) => {
+      const unsubscribe = store?.subscribeWithSelector(selector, onStoreChange);
+      return unsubscribe ?? noop;
+    },
+    [store, selector]
+  );
+  const wrappedSnapshot = (0, import_react5.useMemo)(() => {
+    let cachedTuple;
+    return () => {
+      const currentValue = store?.getLatestValue();
+      if (!currentValue) return void 0;
+      if (cachedTuple && cachedTuple[0] === currentValue) {
+        return cachedTuple[1];
+      }
+      const newlySelected = selector(currentValue);
+      if (cachedTuple) {
+        let selectededAreEqualToCached = true;
+        for (const key in cachedTuple[1]) {
+          if (cachedTuple[1][key] === newlySelected[key]) continue;
+          selectededAreEqualToCached = false;
+          break;
+        }
+        if (selectededAreEqualToCached) return cachedTuple[1];
+      }
+      cachedTuple = [currentValue, newlySelected];
+      return cachedTuple[1];
+    };
   }, [store, selector]);
+  const state = (0, import_shim.useSyncExternalStore)(wrappedSubscription, wrappedSnapshot);
   return state;
 }
 
@@ -178,7 +198,9 @@ var useDialogManager = () => {
 
 // src/context/MessageContext.tsx
 var import_react10 = __toESM(require("react"));
-var MessageContext = import_react10.default.createContext(void 0);
+var MessageContext = import_react10.default.createContext(
+  void 0
+);
 var useMessageContext = (_componentName) => {
   const contextValue = (0, import_react10.useContext)(MessageContext);
   if (!contextValue) {
@@ -366,7 +388,14 @@ var Avatar = (props) => {
         onError: () => setError(true),
         src: image
       }
-    ) : /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, !!initials.length && /* @__PURE__ */ import_react13.default.createElement("div", { className: (0, import_clsx.default)("str-chat__avatar-fallback"), "data-testid": "avatar-fallback" }, initials), !initials.length && /* @__PURE__ */ import_react13.default.createElement(Icon.User, null))
+    ) : /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, !!initials.length && /* @__PURE__ */ import_react13.default.createElement(
+      "div",
+      {
+        className: (0, import_clsx.default)("str-chat__avatar-fallback"),
+        "data-testid": "avatar-fallback"
+      },
+      initials
+    ), !initials.length && /* @__PURE__ */ import_react13.default.createElement(Icon.User, null))
   );
 };
 
@@ -397,9 +426,7 @@ var ACTIONS_NOT_WORKING_IN_THREAD = [
 
 // src/components/Message/hooks/useUserRole.ts
 var useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
-  const { channel, channelCapabilities = {} } = useChannelStateContext(
-    "useUserRole"
-  );
+  const { channel, channelCapabilities = {} } = useChannelStateContext("useUserRole");
   const { client } = useChatContext("useUserRole");
   const isAdmin = client.user?.role === "admin" || channel.state.membership.role === "admin";
   const isOwner = channel.state.membership.role === "owner";
@@ -683,11 +710,27 @@ var StreamEmoji = ({
 
 // src/components/Reactions/reactionOptions.tsx
 var defaultReactionOptions = [
-  { type: "haha", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F602}", type: "haha" }), name: "Joy" },
-  { type: "like", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F44D}", type: "like" }), name: "Thumbs up" },
-  { type: "love", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u2764\uFE0F", type: "love" }), name: "Heart" },
+  {
+    type: "haha",
+    Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F602}", type: "haha" }),
+    name: "Joy"
+  },
+  {
+    type: "like",
+    Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F44D}", type: "like" }),
+    name: "Thumbs up"
+  },
+  {
+    type: "love",
+    Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u2764\uFE0F", type: "love" }),
+    name: "Heart"
+  },
   { type: "sad", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F614}", type: "sad" }), name: "Sad" },
-  { type: "wow", Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F632}", type: "wow" }), name: "Astonished" }
+  {
+    type: "wow",
+    Component: () => /* @__PURE__ */ import_react19.default.createElement(StreamEmoji, { fallback: "\u{1F632}", type: "wow" }),
+    name: "Astonished"
+  }
 ];
 
 // src/components/Reactions/ReactionSelector.tsx
@@ -791,9 +834,7 @@ var UnMemoizedReactionSelector = (props) => {
           className: (0, import_clsx4.default)(
             "str-chat__message-reactions-list-item str-chat__message-reactions-option",
             {
-              "str-chat__message-reactions-option-selected": iHaveReactedWithReaction(
-                reactionType
-              )
+              "str-chat__message-reactions-option-selected": iHaveReactedWithReaction(reactionType)
             }
           ),
           "data-testid": "select-reaction-button",
@@ -888,7 +929,8 @@ var useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
     !message.type || message.type === "error" || message.type === "system" || message.type === "ephemeral" || message.status === "failed" || message.status === "sending")
       return [];
     return messageActionSet.filter(({ type }) => {
-      if (ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply) return false;
+      if (ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply)
+        return false;
       if (type === "delete" && !canDelete || type === "edit" && !canEdit || type === "flag" && !canFlag || type === "markUnread" && !canMarkUnread || type === "mute" && !canMute || type === "quote" && !canQuote || type === "react" && !canReact || type === "reply" && !canReply)
         return false;
       return true;
@@ -1002,17 +1044,41 @@ var DefaultMessageActionComponents = {
 };
 var defaultMessageActionSet = [
   // { placement: 'dropdown', type: 'block' },
-  { Component: DefaultMessageActionComponents.quick.Reply, placement: "quick", type: "reply" },
-  { Component: DefaultMessageActionComponents.quick.React, placement: "quick", type: "react" },
+  {
+    Component: DefaultMessageActionComponents.quick.Reply,
+    placement: "quick",
+    type: "reply"
+  },
+  {
+    Component: DefaultMessageActionComponents.quick.React,
+    placement: "quick",
+    type: "react"
+  },
   {
     Component: DefaultMessageActionComponents.dropdown.Delete,
     placement: "dropdown",
     type: "delete"
   },
-  { Component: DefaultMessageActionComponents.dropdown.Edit, placement: "dropdown", type: "edit" },
-  { Component: DefaultMessageActionComponents.dropdown.Mute, placement: "dropdown", type: "mute" },
-  { Component: DefaultMessageActionComponents.dropdown.Flag, placement: "dropdown", type: "flag" },
-  { Component: DefaultMessageActionComponents.dropdown.Pin, placement: "dropdown", type: "pin" },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Edit,
+    placement: "dropdown",
+    type: "edit"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Mute,
+    placement: "dropdown",
+    type: "mute"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Flag,
+    placement: "dropdown",
+    type: "flag"
+  },
+  {
+    Component: DefaultMessageActionComponents.dropdown.Pin,
+    placement: "dropdown",
+    type: "pin"
+  },
   {
     Component: DefaultMessageActionComponents.dropdown.Quote,
     placement: "dropdown",
@@ -1033,14 +1099,14 @@ var MessageActions = ({
   const { theme } = useChatContext();
   const { isMyMessage, message } = useMessageContext();
   const { t } = useTranslationContext();
-  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react25.useState)(
-    null
-  );
+  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react25.useState)(null);
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
     messageActionSet,
     disableBaseMessageActionSetFilter
   );
-  const { dropdownActionSet, quickActionSet } = useSplitMessageActionSet(filteredMessageActionSet);
+  const { dropdownActionSet, quickActionSet } = useSplitMessageActionSet(
+    filteredMessageActionSet
+  );
   const dropdownDialogId = `message-actions--${message.id}`;
   const reactionSelectorDialogId = `reaction-selector--${message.id}`;
   const dialog = useDialog({ id: dropdownDialogId });