stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/Chat/hooks/useReportLostConnectionSystemNotification.mjs

@@ -1,47 +1,135 @@
 import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.mjs";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 //#region src/components/Chat/hooks/useReportLostConnectionSystemNotification.ts
 /**
-* Publishes a persistent system notification while the client is offline and removes it when
-* back online. Must run under `ChatProvider` and `TranslationProvider` (e.g. from a child of `<Chat>`).
+* Publishes a persistent system notification while this client cannot reach Stream, and removes it
+* when it can again. Must run under `ChatProvider` and `TranslationProvider` (e.g. from a child of
+* `<Chat>`).
+*
+* **Two facts, two messages.** The device losing its network and this client's WebSocket dying are
+* different things, and they disagree in both directions — a socket dies on working Wi-Fi when the
+* server closes it, the token expires or a health check times out. So both are read, and the wording
+* follows:
+*
+* - the device reports no network → the network message
+* - the network is up (or unknown) and the socket is down → the reconnecting message
+*
+* Choosing that grouping is a copy decision rather than a fact about connectivity, which is why the
+* SDK publishes no combined status and why the decision is made here, in the component that renders
+* the copy.
+*
+* Both signals are subscribed **imperatively** rather than through the `useNetworkConnectionState` /
+* `useWSConnectionState` hooks: `<Chat>` calls this, and re-rendering the whole tree on every network
+* flap is exactly what those hooks exist to let consumers avoid.
+*
+* **A drop is held before it is shown**, for
+* `client.wsConnection.config.offlineNotificationDisplayDelayMs`, and dropped entirely if the socket
+* returns inside that window: the socket retries on its own and most drops resolve in well under a
+* second, so showing them all makes a working application look broken. The length is configuration
+* rather than a constant here, so it can be changed without replacing this hook. The device's network
+* is not held back — a browser reports it accurately and it does not flap the way a socket does.
 */
 var useReportLostConnectionSystemNotification = () => {
 	const { t } = useTranslationContext();
 	const { client } = useChatContext();
 	const { addSystemNotification, removeNotification } = useNotificationApi();
-	const connectionLostNotificationIdRef = useRef(null);
+	const notificationIdRef = useRef(null);
+	/** Outside the effect, so re-establishing the subscriptions does not republish what is showing. */
+	const reasonRef = useRef(null);
+	/**
+	* The socket's status as last *shown*, which is not `client.wsConnection.state`: a drop the store
+	* has already published may still be inside its holding window here.
+	*
+	* Outside the effect because that re-runs whenever `t` is replaced, and re-seeding from the store
+	* would discard a drop still being held. Seeded once, on mount, so an application that starts up
+	* with no connection says so immediately rather than after the window.
+	*/
+	const socketOnlineRef = useRef(null);
+	/** The drop being held, so the socket returning can cancel it. */
+	const heldDropRef = useRef(null);
+	const cancelHeldDrop = useCallback(() => {
+		if (heldDropRef.current === null) return;
+		clearTimeout(heldDropRef.current);
+		heldDropRef.current = null;
+	}, []);
+	const dismissConnectionLostNotification = useCallback(() => {
+		if (!notificationIdRef.current) return;
+		removeNotification(notificationIdRef.current);
+		notificationIdRef.current = null;
+		reasonRef.current = null;
+	}, [removeNotification]);
+	/**
+	* Dismissal is scoped to the mount, not to the subscriptions below.
+	*
+	* Their dependencies change for reasons that have nothing to do with the connection — `t` is
+	* replaced when `Streami18n.init()` resolves, asynchronously. When dismissal was part of that
+	* effect's cleanup, a socket dropping before init finished had its notification published and then
+	* immediately removed, leaving no banner on an offline app launch or behind a captive portal.
+	*/
+	useEffect(() => () => {
+		cancelHeldDrop();
+		dismissConnectionLostNotification();
+	}, [cancelHeldDrop, dismissConnectionLostNotification]);
 	useEffect(() => {
 		if (!t || !client) return;
-		const dismissConnectionLostNotification = () => {
-			if (!connectionLostNotificationIdRef.current) return;
-			removeNotification(connectionLostNotificationIdRef.current);
-			connectionLostNotificationIdRef.current = null;
+		const messages = {
+			network: t("chat.reportLostConnection.waitingNetwork.text", "Waiting for network…"),
+			ws: t("chat.reportLostConnection.reconnecting.text", "Reconnecting…")
 		};
-		const handleConnectionChanged = ({ online }) => {
-			if (!online) {
-				if (connectionLostNotificationIdRef.current) return;
-				connectionLostNotificationIdRef.current = addSystemNotification({
-					duration: 0,
-					emitter: "Chat",
-					message: t("Waiting for network…"),
-					severity: "loading",
-					type: "system:network:connection:lost"
-				});
-				return;
-			}
+		const show = (reason) => {
+			if (reasonRef.current === reason) return;
 			dismissConnectionLostNotification();
+			reasonRef.current = reason;
+			notificationIdRef.current = addSystemNotification({
+				duration: 0,
+				emitter: "Chat",
+				message: messages[reason],
+				severity: "loading",
+				type: "system:network:connection:lost"
+			});
 		};
-		client.on("connection.changed", handleConnectionChanged);
-		return () => {
-			client.off("connection.changed", handleConnectionChanged);
+		if (socketOnlineRef.current === null) socketOnlineRef.current = client.wsConnection.isHealthy;
+		let networkOnline = client.networkConnection.isOnline;
+		const sync = () => {
+			if (networkOnline === false) return show("network");
+			if (!socketOnlineRef.current) return show("ws");
 			dismissConnectionLostNotification();
 		};
+		const unsubscribeNetwork = client.networkConnection.state.subscribeWithSelector(({ isOnline }) => ({ isOnline }), ({ isOnline }) => {
+			networkOnline = isOnline;
+			sync();
+		});
+		let seeded = false;
+		const unsubscribeSocket = client.wsConnection.state.subscribeWithSelector(({ isHealthy }) => ({ isHealthy }), ({ isHealthy }) => {
+			if (!seeded) {
+				seeded = true;
+				return;
+			}
+			if (isHealthy) {
+				cancelHeldDrop();
+				socketOnlineRef.current = true;
+				sync();
+				return;
+			}
+			if (heldDropRef.current !== null) return;
+			heldDropRef.current = setTimeout(() => {
+				heldDropRef.current = null;
+				socketOnlineRef.current = false;
+				sync();
+			}, client.wsConnection.config.offlineNotificationDisplayDelayMs);
+		});
+		sync();
+		return () => {
+			unsubscribeNetwork();
+			unsubscribeSocket();
+		};
 	}, [
 		addSystemNotification,
+		cancelHeldDrop,
 		client,
-		removeNotification,
+		dismissConnectionLostNotification,
 		t
 	]);
 };

package/dist/es/components/Chat/hooks/useReportLostConnectionSystemNotification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useReportLostConnectionSystemNotification.mjs","names":[],"sources":["../../../../../src/components/Chat/hooks/useReportLostConnectionSystemNotification.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useTranslationContext } from '../../../context/TranslationContext';\nimport { useNotificationApi } from '../../Notifications/hooks/useNotificationApi';\n\n/**\n * Publishes a persistent system notification while the client is offline and removes it when\n * back online. Must run under `ChatProvider` and `TranslationProvider` (e.g. from a child of `<Chat>`).\n */\nexport const useReportLostConnectionSystemNotification = () => {\n  const { t } = useTranslationContext();\n  const { client } = useChatContext();\n  const { addSystemNotification, removeNotification } = useNotificationApi();\n  const connectionLostNotificationIdRef = useRef<string | null>(null);\n\n  useEffect(() => {\n    if (!t || !client) return;\n\n    const dismissConnectionLostNotification = () => {\n      if (!connectionLostNotificationIdRef.current) return;\n      removeNotification(connectionLostNotificationIdRef.current);\n      connectionLostNotificationIdRef.current = null;\n    };\n\n    const handleConnectionChanged = ({ online }: { online?: boolean }) => {\n      if (!online) {\n        if (connectionLostNotificationIdRef.current) return;\n\n        connectionLostNotificationIdRef.current = addSystemNotification({\n          duration: 0,\n          emitter: 'Chat',\n          message: t('Waiting for network…'),\n          severity: 'loading',\n          type: 'system:network:connection:lost',\n        });\n        return;\n      }\n\n      dismissConnectionLostNotification();\n    };\n\n    client.on('connection.changed', handleConnectionChanged);\n\n    return () => {\n      client.off('connection.changed', handleConnectionChanged);\n      dismissConnectionLostNotification();\n    };\n  }, [addSystemNotification, client, removeNotification, t]);\n};\n"],"mappings":";;;;;;;;;AAUA,IAAa,kDAAkD;CAC7D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,uBAAuB,uBAAuB,mBAAmB;CACzE,MAAM,kCAAkC,OAAsB,IAAI;CAElE,gBAAgB;EACd,IAAI,CAAC,KAAK,CAAC,QAAQ;EAEnB,MAAM,0CAA0C;GAC9C,IAAI,CAAC,gCAAgC,SAAS;GAC9C,mBAAmB,gCAAgC,OAAO;GAC1D,gCAAgC,UAAU;EAC5C;EAEA,MAAM,2BAA2B,EAAE,aAAmC;GACpE,IAAI,CAAC,QAAQ;IACX,IAAI,gCAAgC,SAAS;IAE7C,gCAAgC,UAAU,sBAAsB;KAC9D,UAAU;KACV,SAAS;KACT,SAAS,EAAE,sBAAsB;KACjC,UAAU;KACV,MAAM;IACR,CAAC;IACD;GACF;GAEA,kCAAkC;EACpC;EAEA,OAAO,GAAG,sBAAsB,uBAAuB;EAEvD,aAAa;GACX,OAAO,IAAI,sBAAsB,uBAAuB;GACxD,kCAAkC;EACpC;CACF,GAAG;EAAC;EAAuB;EAAQ;EAAoB;CAAC,CAAC;AAC3D"}
+{"version":3,"file":"useReportLostConnectionSystemNotification.mjs","names":[],"sources":["../../../../../src/components/Chat/hooks/useReportLostConnectionSystemNotification.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { ConnectionType } from 'stream-chat';\n\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useTranslationContext } from '../../../context/TranslationContext';\nimport { useNotificationApi } from '../../Notifications/hooks/useNotificationApi';\n\n/**\n * Publishes a persistent system notification while this client cannot reach Stream, and removes it\n * when it can again. Must run under `ChatProvider` and `TranslationProvider` (e.g. from a child of\n * `<Chat>`).\n *\n * **Two facts, two messages.** The device losing its network and this client's WebSocket dying are\n * different things, and they disagree in both directions — a socket dies on working Wi-Fi when the\n * server closes it, the token expires or a health check times out. So both are read, and the wording\n * follows:\n *\n * - the device reports no network → the network message\n * - the network is up (or unknown) and the socket is down → the reconnecting message\n *\n * Choosing that grouping is a copy decision rather than a fact about connectivity, which is why the\n * SDK publishes no combined status and why the decision is made here, in the component that renders\n * the copy.\n *\n * Both signals are subscribed **imperatively** rather than through the `useNetworkConnectionState` /\n * `useWSConnectionState` hooks: `<Chat>` calls this, and re-rendering the whole tree on every network\n * flap is exactly what those hooks exist to let consumers avoid.\n *\n * **A drop is held before it is shown**, for\n * `client.wsConnection.config.offlineNotificationDisplayDelayMs`, and dropped entirely if the socket\n * returns inside that window: the socket retries on its own and most drops resolve in well under a\n * second, so showing them all makes a working application look broken. The length is configuration\n * rather than a constant here, so it can be changed without replacing this hook. The device's network\n * is not held back — a browser reports it accurately and it does not flap the way a socket does.\n */\nexport const useReportLostConnectionSystemNotification = () => {\n  const { t } = useTranslationContext();\n  const { client } = useChatContext();\n  const { addSystemNotification, removeNotification } = useNotificationApi();\n  const notificationIdRef = useRef<string | null>(null);\n  /** Outside the effect, so re-establishing the subscriptions does not republish what is showing. */\n  const reasonRef = useRef<ConnectionType | null>(null);\n  /**\n   * The socket's status as last *shown*, which is not `client.wsConnection.state`: a drop the store\n   * has already published may still be inside its holding window here.\n   *\n   * Outside the effect because that re-runs whenever `t` is replaced, and re-seeding from the store\n   * would discard a drop still being held. Seeded once, on mount, so an application that starts up\n   * with no connection says so immediately rather than after the window.\n   */\n  const socketOnlineRef = useRef<boolean | null>(null);\n  /** The drop being held, so the socket returning can cancel it. */\n  const heldDropRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancelHeldDrop = useCallback(() => {\n    if (heldDropRef.current === null) return;\n    clearTimeout(heldDropRef.current);\n    heldDropRef.current = null;\n  }, []);\n\n  const dismissConnectionLostNotification = useCallback(() => {\n    if (!notificationIdRef.current) return;\n    removeNotification(notificationIdRef.current);\n    notificationIdRef.current = null;\n    reasonRef.current = null;\n  }, [removeNotification]);\n\n  /**\n   * Dismissal is scoped to the mount, not to the subscriptions below.\n   *\n   * Their dependencies change for reasons that have nothing to do with the connection — `t` is\n   * replaced when `Streami18n.init()` resolves, asynchronously. When dismissal was part of that\n   * effect's cleanup, a socket dropping before init finished had its notification published and then\n   * immediately removed, leaving no banner on an offline app launch or behind a captive portal.\n   */\n  useEffect(\n    () => () => {\n      cancelHeldDrop();\n      dismissConnectionLostNotification();\n    },\n    [cancelHeldDrop, dismissConnectionLostNotification],\n  );\n\n  useEffect(() => {\n    if (!t || !client) return;\n\n    // Keyed by `ConnectionType` rather than a local union, so a connection type added to the client\n    // breaks `yarn build` here (`tsconfig.lib.json`) until someone decides what the banner should say\n    // about it. Verified by widening the type: `Property 'sse' is missing`. Note `yarn types` does\n    // *not* catch it — without `strictNullChecks` the absent key is `undefined`, which is assignable\n    // to `string`.\n    const messages: Record<ConnectionType, string> = {\n      network: t('chat.reportLostConnection.waitingNetwork.text', 'Waiting for network…'),\n      ws: t('chat.reportLostConnection.reconnecting.text', 'Reconnecting…'),\n    };\n\n    const show = (reason: ConnectionType) => {\n      if (reasonRef.current === reason) return;\n      // Replaced rather than left alone: a network drop while \"Reconnecting…\" is showing needs the\n      // more specific message.\n      dismissConnectionLostNotification();\n      reasonRef.current = reason;\n      notificationIdRef.current = addSystemNotification({\n        duration: 0,\n        emitter: 'Chat',\n        message: messages[reason],\n        severity: 'loading',\n        // One type for both messages, deliberately. Consumers filter banners on it — the SDK's own\n        // cookbook recipe does — so splitting it would silently stop those filters seeing the socket\n        // case. The `network` in the name is historical; the message is what was wrong.\n        type: 'system:network:connection:lost',\n      });\n    };\n\n    if (socketOnlineRef.current === null) {\n      socketOnlineRef.current = client.wsConnection.isHealthy;\n    }\n\n    // `=== false` for the network, never `!networkOnline`: `undefined` means nobody has told us, and\n    // on a host whose reporter cannot answer that must not read as offline. The socket's is a plain\n    // boolean.\n    let networkOnline = client.networkConnection.isOnline;\n\n    const sync = () => {\n      if (networkOnline === false) return show('network');\n      if (!socketOnlineRef.current) return show('ws');\n      dismissConnectionLostNotification();\n    };\n\n    const unsubscribeNetwork = client.networkConnection.state.subscribeWithSelector(\n      ({ isOnline }) => ({ isOnline }),\n      ({ isOnline }) => {\n        networkOnline = isOnline;\n        sync();\n      },\n    );\n\n    // `subscribeWithSelector` calls back immediately with the current value. That call is the seed\n    // above rather than a transition, and holding it would delay the banner on an application that\n    // starts up with no connection.\n    let seeded = false;\n\n    const unsubscribeSocket = client.wsConnection.state.subscribeWithSelector(\n      ({ isHealthy }) => ({ isHealthy }),\n      ({ isHealthy }) => {\n        if (!seeded) {\n          seeded = true;\n          return;\n        }\n\n        if (isHealthy) {\n          // Coming back is not held: there is no reason to sit on good news, and a drop still inside\n          // its window is cancelled rather than shown, so a brief flap produces nothing at all.\n          cancelHeldDrop();\n          socketOnlineRef.current = true;\n          sync();\n          return;\n        }\n\n        // Already holding one. A second drop without an intervening recovery cannot happen, but a\n        // re-subscription during the window can, and restarting the timer would extend the wait.\n        if (heldDropRef.current !== null) return;\n\n        heldDropRef.current = setTimeout(() => {\n          heldDropRef.current = null;\n          socketOnlineRef.current = false;\n          sync();\n          // Read when the drop happens rather than captured, so a change to it reaches the next\n          // drop without this effect being re-established.\n        }, client.wsConnection.config.offlineNotificationDisplayDelayMs);\n      },\n    );\n\n    // Read the current state rather than waiting for a transition — a client already offline when\n    // this mounts showed nothing at all before.\n    sync();\n\n    return () => {\n      unsubscribeNetwork();\n      unsubscribeSocket();\n    };\n  }, [\n    addSystemNotification,\n    cancelHeldDrop,\n    client,\n    dismissConnectionLostNotification,\n    t,\n  ]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,kDAAkD;CAC7D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,uBAAuB,uBAAuB,mBAAmB;CACzE,MAAM,oBAAoB,OAAsB,IAAI;;CAEpD,MAAM,YAAY,OAA8B,IAAI;;;;;;;;;CASpD,MAAM,kBAAkB,OAAuB,IAAI;;CAEnD,MAAM,cAAc,OAA6C,IAAI;CAErE,MAAM,iBAAiB,kBAAkB;EACvC,IAAI,YAAY,YAAY,MAAM;EAClC,aAAa,YAAY,OAAO;EAChC,YAAY,UAAU;CACxB,GAAG,CAAC,CAAC;CAEL,MAAM,oCAAoC,kBAAkB;EAC1D,IAAI,CAAC,kBAAkB,SAAS;EAChC,mBAAmB,kBAAkB,OAAO;EAC5C,kBAAkB,UAAU;EAC5B,UAAU,UAAU;CACtB,GAAG,CAAC,kBAAkB,CAAC;;;;;;;;;CAUvB,sBACc;EACV,eAAe;EACf,kCAAkC;CACpC,GACA,CAAC,gBAAgB,iCAAiC,CACpD;CAEA,gBAAgB;EACd,IAAI,CAAC,KAAK,CAAC,QAAQ;EAOnB,MAAM,WAA2C;GAC/C,SAAS,EAAE,iDAAiD,sBAAsB;GAClF,IAAI,EAAE,+CAA+C,eAAe;EACtE;EAEA,MAAM,QAAQ,WAA2B;GACvC,IAAI,UAAU,YAAY,QAAQ;GAGlC,kCAAkC;GAClC,UAAU,UAAU;GACpB,kBAAkB,UAAU,sBAAsB;IAChD,UAAU;IACV,SAAS;IACT,SAAS,SAAS;IAClB,UAAU;IAIV,MAAM;GACR,CAAC;EACH;EAEA,IAAI,gBAAgB,YAAY,MAC9B,gBAAgB,UAAU,OAAO,aAAa;EAMhD,IAAI,gBAAgB,OAAO,kBAAkB;EAE7C,MAAM,aAAa;GACjB,IAAI,kBAAkB,OAAO,OAAO,KAAK,SAAS;GAClD,IAAI,CAAC,gBAAgB,SAAS,OAAO,KAAK,IAAI;GAC9C,kCAAkC;EACpC;EAEA,MAAM,qBAAqB,OAAO,kBAAkB,MAAM,uBACvD,EAAE,gBAAgB,EAAE,SAAS,KAC7B,EAAE,eAAe;GAChB,gBAAgB;GAChB,KAAK;EACP,CACF;EAKA,IAAI,SAAS;EAEb,MAAM,oBAAoB,OAAO,aAAa,MAAM,uBACjD,EAAE,iBAAiB,EAAE,UAAU,KAC/B,EAAE,gBAAgB;GACjB,IAAI,CAAC,QAAQ;IACX,SAAS;IACT;GACF;GAEA,IAAI,WAAW;IAGb,eAAe;IACf,gBAAgB,UAAU;IAC1B,KAAK;IACL;GACF;GAIA,IAAI,YAAY,YAAY,MAAM;GAElC,YAAY,UAAU,iBAAiB;IACrC,YAAY,UAAU;IACtB,gBAAgB,UAAU;IAC1B,KAAK;GAGP,GAAG,OAAO,aAAa,OAAO,iCAAiC;EACjE,CACF;EAIA,KAAK;EAEL,aAAa;GACX,mBAAmB;GACnB,kBAAkB;EACpB;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}

package/dist/es/components/Chat/hooks/useSplitActionSet.mjs

@@ -7,7 +7,7 @@ var useSplitActionSet = (actionSet) => useMemo(() => {
 	for (const action of actionSet) {
 		if (action.placement === "quick") quickActionSet.push(action);
 		if (action.placement === "dropdown") dropdownActionSet.push(action);
-		if (action.placement === "quick-dropdown-toggle") quickDropdownToggleAction ?? (quickDropdownToggleAction = action);
+		if (action.placement === "quick-dropdown-toggle") quickDropdownToggleAction ??= action;
 	}
 	return {
 		dropdownActionSet,

package/dist/es/components/Chat/hooks/useSplitActionSet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSplitActionSet.mjs","names":[],"sources":["../../../../../src/components/Chat/hooks/useSplitActionSet.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport const useSplitActionSet = <\n  T extends\n    | { placement: 'quick' }\n    | { placement: 'dropdown' }\n    | { placement: 'quick-dropdown-toggle' },\n>(\n  actionSet: T[],\n) =>\n  useMemo(() => {\n    const quickActionSet: Extract<T, { placement: 'quick' }>[] = [];\n    const dropdownActionSet: Extract<T, { placement: 'dropdown' }>[] = [];\n    let quickDropdownToggleAction:\n      | Extract<T, { placement: 'quick-dropdown-toggle' }>\n      | undefined;\n\n    for (const action of actionSet) {\n      if (action.placement === 'quick')\n        quickActionSet.push(action as (typeof quickActionSet)[number]);\n      if (action.placement === 'dropdown')\n        dropdownActionSet.push(action as (typeof dropdownActionSet)[number]);\n      if (action.placement === 'quick-dropdown-toggle') {\n        quickDropdownToggleAction ??= action as Extract<\n          T,\n          { placement: 'quick-dropdown-toggle' }\n        >;\n      }\n    }\n\n    return { dropdownActionSet, quickActionSet, quickDropdownToggleAction } as const;\n  }, [actionSet]);\n"],"mappings":";;AAEA,IAAa,qBAMX,cAEA,cAAc;CACZ,MAAM,iBAAuD,CAAC;CAC9D,MAAM,oBAA6D,CAAC;CACpE,IAAI;CAIJ,KAAK,MAAM,UAAU,WAAW;EAC9B,IAAI,OAAO,cAAc,SACvB,eAAe,KAAK,MAAyC;EAC/D,IAAI,OAAO,cAAc,YACvB,kBAAkB,KAAK,MAA4C;EACrE,IAAI,OAAO,cAAc,yBACvB,8BAAA,4BAA8B;CAKlC;CAEA,OAAO;EAAE;EAAmB;EAAgB;CAA0B;AACxE,GAAG,CAAC,SAAS,CAAC"}
+{"version":3,"file":"useSplitActionSet.mjs","names":[],"sources":["../../../../../src/components/Chat/hooks/useSplitActionSet.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport const useSplitActionSet = <\n  T extends\n    | { placement: 'quick' }\n    | { placement: 'dropdown' }\n    | { placement: 'quick-dropdown-toggle' },\n>(\n  actionSet: T[],\n) =>\n  useMemo(() => {\n    const quickActionSet: Extract<T, { placement: 'quick' }>[] = [];\n    const dropdownActionSet: Extract<T, { placement: 'dropdown' }>[] = [];\n    let quickDropdownToggleAction:\n      | Extract<T, { placement: 'quick-dropdown-toggle' }>\n      | undefined;\n\n    for (const action of actionSet) {\n      if (action.placement === 'quick')\n        quickActionSet.push(action as (typeof quickActionSet)[number]);\n      if (action.placement === 'dropdown')\n        dropdownActionSet.push(action as (typeof dropdownActionSet)[number]);\n      if (action.placement === 'quick-dropdown-toggle') {\n        quickDropdownToggleAction ??= action as Extract<\n          T,\n          { placement: 'quick-dropdown-toggle' }\n        >;\n      }\n    }\n\n    return { dropdownActionSet, quickActionSet, quickDropdownToggleAction } as const;\n  }, [actionSet]);\n"],"mappings":";;AAEA,IAAa,qBAMX,cAEA,cAAc;CACZ,MAAM,iBAAuD,CAAC;CAC9D,MAAM,oBAA6D,CAAC;CACpE,IAAI;CAIJ,KAAK,MAAM,UAAU,WAAW;EAC9B,IAAI,OAAO,cAAc,SACvB,eAAe,KAAK,MAAyC;EAC/D,IAAI,OAAO,cAAc,YACvB,kBAAkB,KAAK,MAA4C;EACrE,IAAI,OAAO,cAAc,yBACvB,8BAA8B;CAKlC;CAEA,OAAO;EAAE;EAAmB;EAAgB;CAA0B;AACxE,GAAG,CAAC,SAAS,CAAC"}

package/dist/es/components/Chat/hooks/useWSConnectionState.mjs

@@ -0,0 +1,31 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+//#region src/components/Chat/hooks/useWSConnectionState.ts
+var identity = (state) => state;
+/**
+* This client's **WebSocket** status — whether the realtime connection is up, and the connection id
+* the server keys channel watches by.
+*
+* Not the device's network: see {@link useNetworkConnectionState}. Use this for "reconnecting…", for
+* disabling a composer, or for anything that needs the realtime connection specifically.
+*
+* The store is written on **every** transition, including `client.closeConnection()` — the documented
+* mobile backgrounding path — and it publishes a drop the moment it happens. If you are rendering a
+* "connection lost" banner, hold a drop for `client.wsConnection.config.offlineNotificationDisplayDelayMs` before showing it and
+* cancel it if the socket returns inside that window, which is what `<Chat>` does: the socket retries
+* on its own, and most drops resolve in well under a second.
+*
+* The connection id is not here: it lives on `client.connectionIdManager`, which holds any request
+* that watches or subscribes to presence until one exists. Its `isHealthy` is always a boolean, unlike the
+* network store's three-state `isOnline`.
+*
+* Must run under `ChatProvider`, e.g. from a child of `<Chat>`.
+*/
+var useWSConnectionState = () => {
+	const { client } = useChatContext();
+	return useStateStore(client?.wsConnection.state, identity);
+};
+//#endregion
+export { useWSConnectionState };
+
+//# sourceMappingURL=useWSConnectionState.mjs.map

package/dist/es/components/Chat/hooks/useWSConnectionState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWSConnectionState.mjs","names":[],"sources":["../../../../../src/components/Chat/hooks/useWSConnectionState.ts"],"sourcesContent":["import type { WSConnectionState } from 'stream-chat';\n\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useStateStore } from '../../../store';\n\nconst identity = (state: WSConnectionState) => state;\n\n/**\n * This client's **WebSocket** status — whether the realtime connection is up, and the connection id\n * the server keys channel watches by.\n *\n * Not the device's network: see {@link useNetworkConnectionState}. Use this for \"reconnecting…\", for\n * disabling a composer, or for anything that needs the realtime connection specifically.\n *\n * The store is written on **every** transition, including `client.closeConnection()` — the documented\n * mobile backgrounding path — and it publishes a drop the moment it happens. If you are rendering a\n * \"connection lost\" banner, hold a drop for `client.wsConnection.config.offlineNotificationDisplayDelayMs` before showing it and\n * cancel it if the socket returns inside that window, which is what `<Chat>` does: the socket retries\n * on its own, and most drops resolve in well under a second.\n *\n * The connection id is not here: it lives on `client.connectionIdManager`, which holds any request\n * that watches or subscribes to presence until one exists. Its `isHealthy` is always a boolean, unlike the\n * network store's three-state `isOnline`.\n *\n * Must run under `ChatProvider`, e.g. from a child of `<Chat>`.\n */\nexport const useWSConnectionState = (): WSConnectionState | undefined => {\n  const { client } = useChatContext();\n  return useStateStore(client?.wsConnection.state, identity);\n};\n"],"mappings":";;;AAKA,IAAM,YAAY,UAA6B;;;;;;;;;;;;;;;;;;;;AAqB/C,IAAa,6BAA4D;CACvE,MAAM,EAAE,WAAW,eAAe;CAClC,OAAO,cAAc,QAAQ,aAAa,OAAO,QAAQ;AAC3D"}

package/dist/es/components/DateSeparator/DateSeparator.mjs

@@ -6,7 +6,7 @@ import clsx from "clsx";
 //#region src/components/DateSeparator/DateSeparator.tsx
 var UnMemoizedDateSeparator = (props) => {
 	const { calendar, className, date: messageCreatedAt, floating, formatDate, ...restTimestampFormatterOptions } = props;
-	const { t, tDateTimeParser } = useTranslationContext("DateSeparator");
+	const { t, tDateTimeParser } = useTranslationContext();
 	const formattedDate = getDateString({
 		calendar,
 		...restTimestampFormatterOptions,
@@ -14,7 +14,7 @@ var UnMemoizedDateSeparator = (props) => {
 		messageCreatedAt,
 		t,
 		tDateTimeParser,
-		timestampTranslationKey: "timestamp/DateSeparator"
+		timestampTranslationKey: "timestamp.DateSeparator"
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("str-chat__date-separator", { "str-chat__date-separator--floating": floating }, className),

package/dist/es/components/DateSeparator/DateSeparator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateSeparator.mjs","names":[],"sources":["../../../../src/components/DateSeparator/DateSeparator.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { getDateString } from '../../i18n/utils';\n\nimport type { TimestampFormatterOptions } from '../../i18n/types';\n\nexport type DateSeparatorProps = TimestampFormatterOptions & {\n  /** Optional className for the root element */\n  className?: string;\n  /** The date to format */\n  date: Date;\n  /** When true, applies floating positioning (fixed at top when scrolling) */\n  floating?: boolean;\n  /** Override the default formatting of the date. This is a function that has access to the original date object. */\n  formatDate?: (date: Date) => string;\n  // todo: position and unread are not necessary anymore\n  /** Set the position of the date in the separator, options are 'left', 'center', 'right', @default right */\n  position?: 'left' | 'center' | 'right';\n  /** If following messages are not new */\n  unread?: boolean;\n};\n\nconst UnMemoizedDateSeparator = (props: DateSeparatorProps) => {\n  const {\n    calendar,\n    className,\n    date: messageCreatedAt,\n    floating,\n    formatDate,\n    ...restTimestampFormatterOptions\n  } = props;\n\n  const { t, tDateTimeParser } = useTranslationContext('DateSeparator');\n\n  const formattedDate = getDateString({\n    calendar,\n    ...restTimestampFormatterOptions,\n    formatDate,\n    messageCreatedAt,\n    t,\n    tDateTimeParser,\n    timestampTranslationKey: 'timestamp/DateSeparator',\n  });\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__date-separator',\n        { 'str-chat__date-separator--floating': floating },\n        className,\n      )}\n      data-date={messageCreatedAt.toISOString()}\n      data-testid={floating ? 'floating-date-separator' : 'date-separator'}\n    >\n      <div className='str-chat__date-separator-date'>{formattedDate}</div>\n    </div>\n  );\n};\n\n/**\n * A simple date separator between messages.\n */\nexport const DateSeparator = React.memo(\n  UnMemoizedDateSeparator,\n) as typeof UnMemoizedDateSeparator;\n"],"mappings":";;;;;;AAwBA,IAAM,2BAA2B,UAA8B;CAC7D,MAAM,EACJ,UACA,WACA,MAAM,kBACN,UACA,YACA,GAAG,kCACD;CAEJ,MAAM,EAAE,GAAG,oBAAoB,sBAAsB,eAAe;CAEpE,MAAM,gBAAgB,cAAc;EAClC;EACA,GAAG;EACH;EACA;EACA;EACA;EACA,yBAAyB;CAC3B,CAAC;CAED,OACE,oBAAC,OAAD;EACE,WAAW,KACT,4BACA,EAAE,sCAAsC,SAAS,GACjD,SACF;EACA,aAAW,iBAAiB,YAAY;EACxC,eAAa,WAAW,4BAA4B;YAEpD,oBAAC,OAAD;GAAK,WAAU;aAAiC;EAAmB,CAAA;CAChE,CAAA;AAET;;;;AAKA,IAAa,gBAAgB,MAAM,KACjC,uBACF"}
+{"version":3,"file":"DateSeparator.mjs","names":[],"sources":["../../../../src/components/DateSeparator/DateSeparator.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { getDateString } from '../../i18n/utils';\n\nimport type { TimestampFormatterOptions } from '../../i18n/types';\n\nexport type DateSeparatorProps = TimestampFormatterOptions & {\n  /** Optional className for the root element */\n  className?: string;\n  /** The date to format */\n  date: Date;\n  /** When true, applies floating positioning (fixed at top when scrolling) */\n  floating?: boolean;\n  /** Override the default formatting of the date. This is a function that has access to the original date object. */\n  formatDate?: (date: Date) => string;\n  // todo: position and unread are not necessary anymore\n  /** Set the position of the date in the separator, options are 'left', 'center', 'right', @default right */\n  position?: 'left' | 'center' | 'right';\n  /** If following messages are not new */\n  unread?: boolean;\n};\n\nconst UnMemoizedDateSeparator = (props: DateSeparatorProps) => {\n  const {\n    calendar,\n    className,\n    date: messageCreatedAt,\n    floating,\n    formatDate,\n    ...restTimestampFormatterOptions\n  } = props;\n\n  const { t, tDateTimeParser } = useTranslationContext();\n\n  const formattedDate = getDateString({\n    calendar,\n    ...restTimestampFormatterOptions,\n    formatDate,\n    messageCreatedAt,\n    t,\n    tDateTimeParser,\n    timestampTranslationKey: 'timestamp.DateSeparator',\n  });\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__date-separator',\n        { 'str-chat__date-separator--floating': floating },\n        className,\n      )}\n      data-date={messageCreatedAt.toISOString()}\n      data-testid={floating ? 'floating-date-separator' : 'date-separator'}\n    >\n      <div className='str-chat__date-separator-date'>{formattedDate}</div>\n    </div>\n  );\n};\n\n/**\n * A simple date separator between messages.\n */\nexport const DateSeparator = React.memo(\n  UnMemoizedDateSeparator,\n) as typeof UnMemoizedDateSeparator;\n"],"mappings":";;;;;;AAwBA,IAAM,2BAA2B,UAA8B;CAC7D,MAAM,EACJ,UACA,WACA,MAAM,kBACN,UACA,YACA,GAAG,kCACD;CAEJ,MAAM,EAAE,GAAG,oBAAoB,sBAAsB;CAErD,MAAM,gBAAgB,cAAc;EAClC;EACA,GAAG;EACH;EACA;EACA;EACA;EACA,yBAAyB;CAC3B,CAAC;CAED,OACE,oBAAC,OAAD;EACE,WAAW,KACT,4BACA,EAAE,sCAAsC,SAAS,GACjD,SACF;EACA,aAAW,iBAAiB,YAAY;EACxC,eAAa,WAAW,4BAA4B;YAEpD,oBAAC,OAAD;GAAK,WAAU;aAAiC;EAAmB,CAAA;CAChE,CAAA;AAET;;;;AAKA,IAAa,gBAAgB,MAAM,KACjC,uBACF"}

package/dist/es/components/Dialog/components/Alert.mjs

@@ -1,5 +1,5 @@
-import { useModalContext } from "../../../context/ModalContext.mjs";
 import { useAriaIdentifiers } from "../../../a11y/hooks/useAriaIdentifiers.mjs";
+import { useModalContext } from "../../../context/ModalContext.mjs";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";

package/dist/es/components/Dialog/components/Callout.mjs

@@ -1,9 +1,9 @@
 import { useComponentContext } from "../../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useDialogIsOpen } from "../hooks/useDialog.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { DialogAnchor } from "../service/DialogAnchor.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -41,7 +41,7 @@ var DefaultCalloutDialog = ({ children, className, onClose }) => {
 		className: "str-chat__callout",
 		children: [children, /* @__PURE__ */ jsx(Button, {
 			appearance: "ghost",
-			"aria-label": t("aria/Close callout dialog"),
+			"aria-label": t("dialog.callout.closeCalloutDialog.ariaLabel", "Close callout dialog"),
 			circular: true,
 			className: clsx(className, "str-chat__callout__close-button"),
 			onClick: onClose,

package/dist/es/components/Dialog/components/Callout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Callout.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\nimport { DialogAnchor, type DialogAnchorProps } from '../service';\nimport { useDialogIsOpen } from '../hooks';\nimport { Button } from '../../Button';\nimport clsx from 'clsx';\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../context';\n\nexport type CalloutProps = PropsWithChildren<\n  DialogAnchorProps & {\n    onClose: () => void;\n    className?: string;\n  }\n>;\n\n/**\n * Callout is a general purpose component that displays content in dialog that has been previously opened by clicking on a reference element\n * and has to be dismissed to disappear.\n * Tooltip on the other side is a dialog that appears upon pointer device cursor hovering above a reference element.\n * @param children\n * @param className\n * @param dialogManagerId\n * @param dialogId\n * @param onClose\n * @param anchorProps\n * @constructor\n */\n\nexport const Callout = ({\n  children,\n  className,\n  dialogManagerId,\n  id: dialogId,\n  onClose,\n  ...anchorProps\n}: CalloutProps) => {\n  const { CalloutDialog = DefaultCalloutDialog } = useComponentContext();\n\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);\n  return (\n    <DialogAnchor {...anchorProps} dialogManagerId={dialogManagerId} id={dialogId}>\n      {dialogIsOpen && (\n        <CalloutDialog className={className} onClose={onClose}>\n          {children}\n        </CalloutDialog>\n      )}\n    </DialogAnchor>\n  );\n};\n\nexport type CalloutDialogProps = Pick<CalloutProps, 'children' | 'className' | 'onClose'>;\n\nconst DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogProps) => {\n  const { IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__callout'>\n      {children}\n      <Button\n        appearance='ghost'\n        aria-label={t('aria/Close callout dialog')}\n        circular\n        className={clsx(className, 'str-chat__callout__close-button')}\n        onClick={onClose}\n        size='sm'\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,EACtB,UACA,WACA,iBACA,IAAI,UACJ,SACA,GAAG,kBACe;CAClB,MAAM,EAAE,gBAAgB,yBAAyB,oBAAoB;CAErE,MAAM,eAAe,gBAAgB,UAAU,eAAe;CAC9D,OACE,oBAAC,cAAD;EAAc,GAAI;EAA8B;EAAiB,IAAI;YAClE,gBACC,oBAAC,eAAD;GAA0B;GAAoB;GAC3C;EACY,CAAA;CAEL,CAAA;AAElB;AAIA,IAAM,wBAAwB,EAAE,UAAU,WAAW,cAAkC;CACrF,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,UACD,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,2BAA2B;GACzC,UAAA;GACA,WAAW,KAAK,WAAW,iCAAiC;GAC5D,SAAS;GACT,MAAK;GACL,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}
+{"version":3,"file":"Callout.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Callout.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\nimport { DialogAnchor, type DialogAnchorProps } from '../service';\nimport { useDialogIsOpen } from '../hooks';\nimport { Button } from '../../Button';\nimport clsx from 'clsx';\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../context';\n\nexport type CalloutProps = PropsWithChildren<\n  DialogAnchorProps & {\n    onClose: () => void;\n    className?: string;\n  }\n>;\n\n/**\n * Callout is a general purpose component that displays content in dialog that has been previously opened by clicking on a reference element\n * and has to be dismissed to disappear.\n * Tooltip on the other side is a dialog that appears upon pointer device cursor hovering above a reference element.\n * @param children\n * @param className\n * @param dialogManagerId\n * @param dialogId\n * @param onClose\n * @param anchorProps\n * @constructor\n */\n\nexport const Callout = ({\n  children,\n  className,\n  dialogManagerId,\n  id: dialogId,\n  onClose,\n  ...anchorProps\n}: CalloutProps) => {\n  const { CalloutDialog = DefaultCalloutDialog } = useComponentContext();\n\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);\n  return (\n    <DialogAnchor {...anchorProps} dialogManagerId={dialogManagerId} id={dialogId}>\n      {dialogIsOpen && (\n        <CalloutDialog className={className} onClose={onClose}>\n          {children}\n        </CalloutDialog>\n      )}\n    </DialogAnchor>\n  );\n};\n\nexport type CalloutDialogProps = Pick<CalloutProps, 'children' | 'className' | 'onClose'>;\n\nconst DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogProps) => {\n  const { IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__callout'>\n      {children}\n      <Button\n        appearance='ghost'\n        aria-label={t(\n          'dialog.callout.closeCalloutDialog.ariaLabel',\n          'Close callout dialog',\n        )}\n        circular\n        className={clsx(className, 'str-chat__callout__close-button')}\n        onClick={onClose}\n        size='sm'\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,EACtB,UACA,WACA,iBACA,IAAI,UACJ,SACA,GAAG,kBACe;CAClB,MAAM,EAAE,gBAAgB,yBAAyB,oBAAoB;CAErE,MAAM,eAAe,gBAAgB,UAAU,eAAe;CAC9D,OACE,oBAAC,cAAD;EAAc,GAAI;EAA8B;EAAiB,IAAI;YAClE,gBACC,oBAAC,eAAD;GAA0B;GAAoB;GAC3C;EACY,CAAA;CAEL,CAAA;AAElB;AAIA,IAAM,wBAAwB,EAAE,UAAU,WAAW,cAAkC;CACrF,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,UACD,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EACV,+CACA,sBACF;GACA,UAAA;GACA,WAAW,KAAK,WAAW,iCAAiC;GAC5D,SAAS;GACT,MAAK;GACL,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}

package/dist/es/components/Dialog/components/ContextMenu.mjs

@@ -1,12 +1,13 @@
+import { requireContext } from "../../../context/requireContext.mjs";
 import { useComponentContext } from "../../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useDialogIsOpen, useDialogOnNearestManager } from "../hooks/useDialog.mjs";
+import { createRovingFocusKeyDownHandler } from "../../../a11y/a11yUtils.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Avatar } from "../../Avatar/Avatar.mjs";
 import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden.mjs";
-import { useStableId } from "../../UtilityComponents/useStableId.mjs";
 import { DialogAnchor, useDialogAnchor } from "../service/DialogAnchor.mjs";
-import { Avatar } from "../../Avatar/Avatar.mjs";
-import { createRovingFocusKeyDownHandler } from "../../../a11y/a11yUtils.mjs";
+import { useStableId } from "../../UtilityComponents/useStableId.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import React, { createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -196,7 +197,7 @@ var ContextMenuBackButton = ({ "aria-label": ariaLabel, "aria-labelledby": ariaL
 	const { t } = useTranslationContext();
 	const generatedBackNavigationLabelId = useStableId();
 	const generatedVisibleLabelId = useStableId();
-	const resolvedAriaLabel = ariaLabel ?? t("aria/Back to parent menu button");
+	const resolvedAriaLabel = ariaLabel ?? t("dialog.contextMenu.backParentMenuButton.ariaLabel", "Back to parent menu button");
 	const resolvedAriaLabelledBy = ariaLabelledBy ?? `${generatedVisibleLabelId} ${generatedBackNavigationLabelId}`;
 	return /* @__PURE__ */ jsxs("button", {
 		...props,
@@ -269,7 +270,7 @@ var resolveSubmenuInitialFocusTarget = ({ contextMenuRoot, initialFocus, itemSel
 	return items.find((item) => !item.closest(CONTEXT_MENU_HEADER_SELECTOR)) ?? items[0] ?? null;
 };
 var ContextMenuContext = React.createContext(void 0);
-var useContextMenuContext = () => useContext(ContextMenuContext);
+var useContextMenuContext = () => requireContext(useContext(ContextMenuContext), "useContextMenuContext", "ContextMenu");
 /**
 * Internal/default content renderer for {@link ContextMenu}.
 *
@@ -280,7 +281,7 @@ var useContextMenuContext = () => useContext(ContextMenuContext);
 function ContextMenuContent({ anchorReferenceElement, backButtonAriaLabel, backLabel, children, className, enableAnimations = true, Header, items, ItemsWrapper, keyboardNavigation, menuClassName, onClose, onMenuLevelChange, transitionDirection, ...props }) {
 	const { t } = useTranslationContext();
 	const { IconChevronLeft } = useComponentContextIcons();
-	const resolvedBackLabel = backLabel ?? t("Back");
+	const resolvedBackLabel = backLabel ?? t("common.back.label", "Back");
 	const { ["aria-describedby"]: rootAriaDescribedBy, ["aria-label"]: rootAriaLabel, ["aria-labelledby"]: rootAriaLabelledBy, ...contextMenuRootProps } = props;
 	const rootLevel = useMemo(() => ({
 		Header,
@@ -404,7 +405,7 @@ function ContextMenuContent({ anchorReferenceElement, backButtonAriaLabel, backL
 		},
 		children: /* @__PURE__ */ jsxs(ContextMenuRoot, {
 			"aria-describedby": isSubmenuLevel ? void 0 : rootAriaDescribedBy,
-			"aria-label": isSubmenuLevel ? t("aria/Submenu") : rootAriaLabel,
+			"aria-label": isSubmenuLevel ? t("dialog.contextMenu.submenu.ariaLabel", "Submenu") : rootAriaLabel,
 			"aria-labelledby": isSubmenuLevel ? void 0 : rootAriaLabelledBy,
 			className: clsx(className, activeMenu.menuClassName),
 			"data-str-chat-enable-animations": enableAnimations,