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

package/dist/es/components/Reactions/hooks/useProcessReactions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useProcessReactions.mjs","names":[],"sources":["../../../../../src/components/Reactions/hooks/useProcessReactions.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { useComponentContext, useMessageContext } from '../../../context';\nimport { defaultReactionOptions } from '../reactionOptions';\n\nimport type { MessageReactionsProps } from '../MessageReactions';\nimport type { ReactionsComparator, ReactionSummary } from '../types';\n\nexport type UseProcessReactionsParams = Pick<\n  MessageReactionsProps,\n  'own_reactions' | 'reaction_groups' | 'reactions'\n> & {\n  sortReactions?: ReactionsComparator;\n};\n\nexport const defaultReactionsSort: ReactionsComparator = (a, b) => {\n  if (a.firstReactionAt && b.firstReactionAt) {\n    return +a.firstReactionAt - +b.firstReactionAt;\n  }\n\n  return a.reactionType.localeCompare(b.reactionType, 'en');\n};\n\nexport const useProcessReactions = (params: UseProcessReactionsParams) => {\n  const {\n    own_reactions: propOwnReactions,\n    reaction_groups: propReactionGroups,\n    reactions: propReactions,\n    sortReactions: propSortReactions,\n  } = params;\n  const { message, sortReactions: contextSortReactions } =\n    useMessageContext('useProcessReactions');\n  const { reactionOptions = defaultReactionOptions } =\n    useComponentContext('useProcessReactions');\n\n  const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;\n  const latestReactions = propReactions ?? message.latest_reactions;\n  const ownReactions = propOwnReactions ?? message?.own_reactions;\n  const reactionGroups = propReactionGroups ?? message?.reaction_groups ?? undefined;\n\n  const isOwnReaction = useCallback(\n    (reactionType: string) =>\n      ownReactions?.some((reaction) => reaction.type === reactionType) ?? false,\n    [ownReactions],\n  );\n\n  const getEmojiByReactionType = useCallback(\n    (reactionType: string) => {\n      if (Array.isArray(reactionOptions)) {\n        return (\n          reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null\n        );\n      }\n\n      return (\n        reactionOptions.quick[reactionType]?.Component ??\n        reactionOptions.extended?.[reactionType]?.Component ??\n        null\n      );\n    },\n    [reactionOptions],\n  );\n\n  const isSupportedReaction = useCallback(\n    (reactionType: string) => {\n      if (Array.isArray(reactionOptions)) {\n        return reactionOptions.some(\n          (reactionOption) => reactionOption.type === reactionType,\n        );\n      }\n\n      return (\n        typeof reactionOptions.quick[reactionType] !== 'undefined' ||\n        typeof reactionOptions.extended?.[reactionType] !== 'undefined'\n      );\n    },\n    [reactionOptions],\n  );\n\n  /**\n   * Amount of unique reaction types (\"haha\", \"like\", etc.) on a message.\n   */\n  const uniqueReactionTypeCount = useMemo(() => {\n    if (!reactionGroups) {\n      return 0;\n    }\n\n    return Object.keys(reactionGroups).filter((reactionType) =>\n      isSupportedReaction(reactionType),\n    ).length;\n  }, [isSupportedReaction, reactionGroups]);\n\n  // Group the reacting user names by reaction type in a single pass, so each\n  // reaction group can look its names up in O(1) instead of re-scanning the\n  // whole `latestReactions` array per type (previously O(types × reactions)).\n  const latestReactedUserNamesByType = useMemo(() => {\n    const namesByType = new Map<string, string[]>();\n    if (!latestReactions) return namesByType;\n\n    for (const reaction of latestReactions) {\n      if (!reaction.type) continue;\n      const username = reaction.user?.name || reaction.user?.id;\n      if (!username) continue;\n\n      const existing = namesByType.get(reaction.type);\n      if (existing) {\n        existing.push(username);\n      } else {\n        namesByType.set(reaction.type, [username]);\n      }\n    }\n\n    return namesByType;\n  }, [latestReactions]);\n\n  const existingReactions: ReactionSummary[] = useMemo(() => {\n    if (!reactionGroups) {\n      return [];\n    }\n\n    const unsortedReactions = Object.entries(reactionGroups).flatMap(\n      ([reactionType, { count, first_reaction_at, last_reaction_at }]) => {\n        if (count === 0 || !isSupportedReaction(reactionType)) {\n          return [];\n        }\n\n        const latestReactedUserNames =\n          latestReactedUserNamesByType.get(reactionType) ?? [];\n\n        return [\n          {\n            EmojiComponent: getEmojiByReactionType(reactionType),\n            firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,\n            isOwnReaction: isOwnReaction(reactionType),\n            lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,\n            latestReactedUserNames,\n            reactionCount: count,\n            reactionType,\n            unlistedReactedUserCount: count - latestReactedUserNames.length,\n          },\n        ];\n      },\n    );\n\n    return unsortedReactions.sort(sortReactions);\n  }, [\n    getEmojiByReactionType,\n    latestReactedUserNamesByType,\n    isOwnReaction,\n    isSupportedReaction,\n    reactionGroups,\n    sortReactions,\n  ]);\n\n  const hasReactions = existingReactions.length > 0;\n\n  const totalReactionCount = useMemo(\n    () =>\n      Object.values(reactionGroups ?? {}).reduce((total, { count }) => total + count, 0),\n\n    [reactionGroups],\n  );\n\n  return {\n    existingReactions,\n    hasReactions,\n    reactionGroups,\n    totalReactionCount,\n    uniqueReactionTypeCount,\n  } as const;\n};\n"],"mappings":"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"}
+{"version":3,"file":"useProcessReactions.mjs","names":[],"sources":["../../../../../src/components/Reactions/hooks/useProcessReactions.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { useComponentContext, useMessageContext } from '../../../context';\nimport { defaultReactionOptions } from '../reactionOptions';\n\nimport type { MessageReactionsProps } from '../MessageReactions';\nimport type { ReactionsComparator, ReactionSummary } from '../types';\nimport { nsToDate } from 'stream-chat';\n\nexport type UseProcessReactionsParams = Pick<\n  MessageReactionsProps,\n  'own_reactions' | 'reaction_groups' | 'reactions'\n> & {\n  sortReactions?: ReactionsComparator;\n};\n\nexport const defaultReactionsSort: ReactionsComparator = (a, b) => {\n  if (a.firstReactionAt && b.firstReactionAt) {\n    return +a.firstReactionAt - +b.firstReactionAt;\n  }\n\n  return a.reactionType.localeCompare(b.reactionType, 'en');\n};\n\nexport const useProcessReactions = (params: UseProcessReactionsParams) => {\n  const {\n    own_reactions: propOwnReactions,\n    reaction_groups: propReactionGroups,\n    reactions: propReactions,\n    sortReactions: propSortReactions,\n  } = params;\n  const { message, sortReactions: contextSortReactions } = useMessageContext();\n  const { reactionOptions = defaultReactionOptions } = useComponentContext();\n\n  const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;\n  const latestReactions = propReactions ?? message.latest_reactions;\n  const ownReactions = propOwnReactions ?? message?.own_reactions;\n  const reactionGroups = propReactionGroups ?? message?.reaction_groups ?? undefined;\n\n  const isOwnReaction = useCallback(\n    (reactionType: string) =>\n      ownReactions?.some((reaction) => reaction.type === reactionType) ?? false,\n    [ownReactions],\n  );\n\n  const getEmojiByReactionType = useCallback(\n    (reactionType: string) => {\n      if (Array.isArray(reactionOptions)) {\n        return (\n          reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null\n        );\n      }\n\n      return (\n        reactionOptions.quick[reactionType]?.Component ??\n        reactionOptions.extended?.[reactionType]?.Component ??\n        null\n      );\n    },\n    [reactionOptions],\n  );\n\n  const isSupportedReaction = useCallback(\n    (reactionType: string) => {\n      if (Array.isArray(reactionOptions)) {\n        return reactionOptions.some(\n          (reactionOption) => reactionOption.type === reactionType,\n        );\n      }\n\n      return (\n        typeof reactionOptions.quick[reactionType] !== 'undefined' ||\n        typeof reactionOptions.extended?.[reactionType] !== 'undefined'\n      );\n    },\n    [reactionOptions],\n  );\n\n  /**\n   * Amount of unique reaction types (\"haha\", \"like\", etc.) on a message.\n   */\n  const uniqueReactionTypeCount = useMemo(() => {\n    if (!reactionGroups) {\n      return 0;\n    }\n\n    return Object.keys(reactionGroups).filter((reactionType) =>\n      isSupportedReaction(reactionType),\n    ).length;\n  }, [isSupportedReaction, reactionGroups]);\n\n  // Group the reacting user names by reaction type in a single pass, so each\n  // reaction group can look its names up in O(1) instead of re-scanning the\n  // whole `latestReactions` array per type (previously O(types × reactions)).\n  const latestReactedUserNamesByType = useMemo(() => {\n    const namesByType = new Map<string, string[]>();\n    if (!latestReactions) return namesByType;\n\n    for (const reaction of latestReactions) {\n      if (!reaction.type) continue;\n      const username = reaction.user?.name || reaction.user?.id;\n      if (!username) continue;\n\n      const existing = namesByType.get(reaction.type);\n      if (existing) {\n        existing.push(username);\n      } else {\n        namesByType.set(reaction.type, [username]);\n      }\n    }\n\n    return namesByType;\n  }, [latestReactions]);\n\n  const existingReactions: ReactionSummary[] = useMemo(() => {\n    if (!reactionGroups) {\n      return [];\n    }\n\n    const unsortedReactions = Object.entries(reactionGroups).flatMap(\n      ([reactionType, { count, first_reaction_at, last_reaction_at }]) => {\n        if (count === 0 || !isSupportedReaction(reactionType)) {\n          return [];\n        }\n\n        const latestReactedUserNames =\n          latestReactedUserNamesByType.get(reactionType) ?? [];\n\n        return [\n          {\n            EmojiComponent: getEmojiByReactionType(reactionType),\n            firstReactionAt:\n              first_reaction_at != null ? nsToDate(first_reaction_at) : null,\n            isOwnReaction: isOwnReaction(reactionType),\n            lastReactionAt: last_reaction_at != null ? nsToDate(last_reaction_at) : null,\n            latestReactedUserNames,\n            reactionCount: count,\n            reactionType,\n            unlistedReactedUserCount: count - latestReactedUserNames.length,\n          },\n        ];\n      },\n    );\n\n    return unsortedReactions.sort(sortReactions);\n  }, [\n    getEmojiByReactionType,\n    latestReactedUserNamesByType,\n    isOwnReaction,\n    isSupportedReaction,\n    reactionGroups,\n    sortReactions,\n  ]);\n\n  const hasReactions = existingReactions.length > 0;\n\n  const totalReactionCount = useMemo(\n    () =>\n      Object.values(reactionGroups ?? {}).reduce((total, { count }) => total + count, 0),\n\n    [reactionGroups],\n  );\n\n  return {\n    existingReactions,\n    hasReactions,\n    reactionGroups,\n    totalReactionCount,\n    uniqueReactionTypeCount,\n  } as const;\n};\n"],"mappings":"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"}

package/dist/es/components/Search/Search.mjs

@@ -1,6 +1,6 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { SearchContextProvider } from "./SearchContext.mjs";
 import { SearchBar } from "./SearchBar/SearchBar.mjs";
 import { SearchResults } from "./SearchResults/SearchResults.mjs";

package/dist/es/components/Search/SearchBar/SearchBar.mjs

@@ -1,10 +1,10 @@
-import { IconSearch, IconXCircle } from "../../Icons/icons.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
-import { useSearchQueriesInProgress } from "../hooks/useSearchQueriesInProgress.mjs";
 import { useSearchContext } from "../SearchContext.mjs";
+import { useSearchQueriesInProgress } from "../hooks/useSearchQueriesInProgress.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -15,6 +15,7 @@ var searchControllerStateSelector = (nextValue) => ({
 });
 var SearchBar = () => {
 	const { t } = useTranslationContext();
+	const { IconSearch, IconXCircle } = useComponentContextIcons();
 	const { announceInteraction } = useInteractionAnnouncements();
 	const { containerRef, disabled, exitSearchOnInputBlur, inputProps, placeholder, searchController } = useSearchContext();
 	const queriesInProgress = useSearchQueriesInProgress(searchController);
@@ -53,7 +54,7 @@ var SearchBar = () => {
 				/* @__PURE__ */ jsx(IconSearch, {}),
 				/* @__PURE__ */ jsx("input", {
 					...inputProps,
-					"aria-label": t("Search"),
+					"aria-label": t("common.search.ariaLabel", "Search"),
 					className: clsx("str-chat__search-bar__input", inputProps?.className),
 					"data-testid": "search-input",
 					disabled,
@@ -70,14 +71,14 @@ var SearchBar = () => {
 							searchController.search(event.target.value);
 						} else searchController.clear();
 					},
-					placeholder: placeholder ?? t("Search"),
+					placeholder: placeholder ?? t("common.search.ariaLabel", "Search"),
 					ref: setInput,
 					type: "text",
 					value: searchQuery
 				}),
 				searchQuery && /* @__PURE__ */ jsx(Button, {
 					appearance: "ghost",
-					"aria-label": t("aria/Clear search"),
+					"aria-label": t("search.bar.clearSearch.ariaLabel", "Clear search"),
 					circular: true,
 					className: "str-chat__search-bar__clear-button",
 					"data-testid": "clear-input-button",
@@ -94,7 +95,7 @@ var SearchBar = () => {
 			]
 		}), isActive && /* @__PURE__ */ jsx(Button, {
 			appearance: "ghost",
-			"aria-label": t("aria/Exit search"),
+			"aria-label": t("search.bar.exitSearch.ariaLabel", "Exit search"),
 			className: "str-chat__search-bar__exit-search-button",
 			"data-testid": "search-bar-button",
 			onClick: () => {
@@ -103,7 +104,7 @@ var SearchBar = () => {
 			},
 			size: "sm",
 			variant: "secondary",
-			children: t("Cancel")
+			children: t("common.cancel.label", "Cancel")
 		})]
 	});
 };

package/dist/es/components/Search/SearchBar/SearchBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.mjs","names":[],"sources":["../../../../../src/components/Search/SearchBar/SearchBar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { useSearchContext } from '../SearchContext';\nimport { useSearchQueriesInProgress } from '../hooks';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport { useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { Button, IconSearch, IconXCircle } from '../../../components';\n\nimport type { SearchControllerState } from 'stream-chat';\n\nconst searchControllerStateSelector = (nextValue: SearchControllerState) => ({\n  isActive: nextValue.isActive,\n  searchQuery: nextValue.searchQuery,\n});\n\nexport const SearchBar = () => {\n  const { t } = useTranslationContext();\n  const { announceInteraction } = useInteractionAnnouncements();\n  const {\n    containerRef,\n    disabled,\n    exitSearchOnInputBlur,\n    inputProps,\n    placeholder,\n    searchController,\n  } = useSearchContext();\n  const queriesInProgress = useSearchQueriesInProgress(searchController);\n\n  const [input, setInput] = useState<HTMLInputElement | null>(null);\n  // Was the most recent pointerdown inside the search widget? Used to disambiguate a blur with a\n  // null `relatedTarget`: browsers report `null` both when focus genuinely leaves the widget AND\n  // when the user presses a non-focusable descendant (the search icon, wrapper padding). Only the\n  // former should collapse search.\n  const pointerDownInsideRef = useRef(false);\n  const { isActive, searchQuery } = useStateStore(\n    searchController.state,\n    searchControllerStateSelector,\n  );\n\n  useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      pointerDownInsideRef.current = !!containerRef.current?.contains(\n        event.target as Node | null,\n      );\n    };\n    // Capture so it runs before the input's blur, regardless of where the press landed.\n    document.addEventListener('pointerdown', handlePointerDown, true);\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown, true);\n    };\n  }, [containerRef]);\n\n  useEffect(() => {\n    if (!input) return;\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        searchController.exit();\n        // Keep focus on the search input (it no longer re-activates search on focus), so the user\n        // can keep navigating from a known place rather than having focus drop to the body.\n        input.focus();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [searchController, input]);\n\n  return (\n    <div className='str-chat__search-bar' data-testid='search-bar' role='search'>\n      <div\n        className={clsx('str-chat__search-bar__input-wrapper', {\n          'str-chat__search-bar__input-wrapper--active': isActive,\n        })}\n      >\n        <IconSearch />\n        <input\n          {...inputProps}\n          aria-label={t('Search')}\n          className={clsx('str-chat__search-bar__input', inputProps?.className)}\n          data-testid='search-input'\n          disabled={disabled}\n          onBlur={({ relatedTarget }) => {\n            // Exit search only when focus leaves the search widget entirely. Moving focus to a\n            // control inside it — the results list, the source filter buttons, the clear button,\n            // or the Cancel/exit button — is not \"leaving search\", so it must not collapse it (the\n            // Cancel button exits via its own activation, per WCAG 3.2.1). This matches the\n            // documented contract (\"clear on every click outside the search\") independent of\n            // whether the input currently holds a query — an empty input is not activated, so the\n            // previous value check only ever suppressed the exit while a query was present.\n            if (!exitSearchOnInputBlur) return;\n            const focusMovedInside = !!containerRef.current?.contains(relatedTarget);\n            // A null relatedTarget also occurs when a non-focusable element inside the widget is\n            // pressed; the preceding pointerdown tells us it was an in-widget interaction, which\n            // must not collapse search.\n            const pressedInside = relatedTarget === null && pointerDownInsideRef.current;\n            pointerDownInsideRef.current = false;\n            if (!focusMovedInside && !pressedInside) {\n              searchController.exit();\n            }\n          }}\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n            // Activate search on user input — NOT on focus (WCAG 3.2.1: focusing a control must not\n            // change context). `search()` runs against the active sources, so activation has to\n            // happen here; `activate()` is idempotent once already active.\n            if (event.target.value) {\n              searchController.activate();\n              searchController.search(event.target.value);\n            } else {\n              searchController.clear();\n            }\n          }}\n          placeholder={placeholder ?? t('Search')}\n          ref={setInput}\n          type='text'\n          value={searchQuery}\n        />\n        {searchQuery && (\n          <Button\n            appearance='ghost'\n            aria-label={t('aria/Clear search')}\n            circular\n            className='str-chat__search-bar__clear-button'\n            data-testid='clear-input-button'\n            disabled={queriesInProgress.length > 0} // prevent user from clearing the input while query is in progress and avoid out-of-sync UX\n            onClick={() => {\n              searchController.clear();\n              input?.focus();\n              announceInteraction('search.cleared');\n            }}\n            size='xs'\n            variant='secondary'\n          >\n            <IconXCircle />\n          </Button>\n        )}\n      </div>\n      {isActive && (\n        <Button\n          appearance='ghost'\n          aria-label={t('aria/Exit search')}\n          className='str-chat__search-bar__exit-search-button'\n          data-testid='search-bar-button'\n          onClick={() => {\n            searchController.exit();\n            // Return focus to the search input so navigation can continue from there (focusing it\n            // no longer re-activates search — see RW19).\n            input?.focus();\n          }}\n          size='sm'\n          variant='secondary'\n        >\n          {t('Cancel')}\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,iCAAiC,eAAsC;CAC3E,UAAU,UAAU;CACpB,aAAa,UAAU;AACzB;AAEA,IAAa,kBAAkB;CAC7B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,wBAAwB,4BAA4B;CAC5D,MAAM,EACJ,cACA,UACA,uBACA,YACA,aACA,qBACE,iBAAiB;CACrB,MAAM,oBAAoB,2BAA2B,gBAAgB;CAErE,MAAM,CAAC,OAAO,YAAY,SAAkC,IAAI;CAKhE,MAAM,uBAAuB,OAAO,KAAK;CACzC,MAAM,EAAE,UAAU,gBAAgB,cAChC,iBAAiB,OACjB,6BACF;CAEA,gBAAgB;EACd,MAAM,qBAAqB,UAAwB;GACjD,qBAAqB,UAAU,CAAC,CAAC,aAAa,SAAS,SACrD,MAAM,MACR;EACF;EAEA,SAAS,iBAAiB,eAAe,mBAAmB,IAAI;EAChE,aAAa;GACX,SAAS,oBAAoB,eAAe,mBAAmB,IAAI;EACrE;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,UAAU;IAC1B,iBAAiB,KAAK;IAGtB,MAAM,MAAM;GACd;EACF;EAEA,SAAS,iBAAiB,WAAW,aAAa;EAClD,aAAa;GACX,SAAS,oBAAoB,WAAW,aAAa;EACvD;CACF,GAAG,CAAC,kBAAkB,KAAK,CAAC;CAE5B,OACE,qBAAC,OAAD;EAAK,WAAU;EAAuB,eAAY;EAAa,MAAK;YAApE,CACE,qBAAC,OAAD;GACE,WAAW,KAAK,uCAAuC,EACrD,+CAA+C,SACjD,CAAC;aAHH;IAKE,oBAAC,YAAD,CAAa,CAAA;IACb,oBAAC,SAAD;KACE,GAAI;KACJ,cAAY,EAAE,QAAQ;KACtB,WAAW,KAAK,+BAA+B,YAAY,SAAS;KACpE,eAAY;KACF;KACV,SAAS,EAAE,oBAAoB;MAQ7B,IAAI,CAAC,uBAAuB;MAC5B,MAAM,mBAAmB,CAAC,CAAC,aAAa,SAAS,SAAS,aAAa;MAIvE,MAAM,gBAAgB,kBAAkB,QAAQ,qBAAqB;MACrE,qBAAqB,UAAU;MAC/B,IAAI,CAAC,oBAAoB,CAAC,eACxB,iBAAiB,KAAK;KAE1B;KACA,WAAW,UAA+C;MAIxD,IAAI,MAAM,OAAO,OAAO;OACtB,iBAAiB,SAAS;OAC1B,iBAAiB,OAAO,MAAM,OAAO,KAAK;MAC5C,OACE,iBAAiB,MAAM;KAE3B;KACA,aAAa,eAAe,EAAE,QAAQ;KACtC,KAAK;KACL,MAAK;KACL,OAAO;IACR,CAAA;IACA,eACC,oBAAC,QAAD;KACE,YAAW;KACX,cAAY,EAAE,mBAAmB;KACjC,UAAA;KACA,WAAU;KACV,eAAY;KACZ,UAAU,kBAAkB,SAAS;KACrC,eAAe;MACb,iBAAiB,MAAM;MACvB,OAAO,MAAM;MACb,oBAAoB,gBAAgB;KACtC;KACA,MAAK;KACL,SAAQ;eAER,oBAAC,aAAD,CAAc,CAAA;IACR,CAAA;GAEP;MACJ,YACC,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,kBAAkB;GAChC,WAAU;GACV,eAAY;GACZ,eAAe;IACb,iBAAiB,KAAK;IAGtB,OAAO,MAAM;GACf;GACA,MAAK;GACL,SAAQ;aAEP,EAAE,QAAQ;EACL,CAAA,CAEP;;AAET"}
+{"version":3,"file":"SearchBar.mjs","names":[],"sources":["../../../../../src/components/Search/SearchBar/SearchBar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { useSearchContext } from '../SearchContext';\nimport { useSearchQueriesInProgress } from '../hooks';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { Button } from '../../../components';\n\nimport type { SearchControllerState } from 'stream-chat';\n\nconst searchControllerStateSelector = (nextValue: SearchControllerState) => ({\n  isActive: nextValue.isActive,\n  searchQuery: nextValue.searchQuery,\n});\n\nexport const SearchBar = () => {\n  const { t } = useTranslationContext();\n  const { IconSearch, IconXCircle } = useComponentContextIcons();\n  const { announceInteraction } = useInteractionAnnouncements();\n  const {\n    containerRef,\n    disabled,\n    exitSearchOnInputBlur,\n    inputProps,\n    placeholder,\n    searchController,\n  } = useSearchContext();\n  const queriesInProgress = useSearchQueriesInProgress(searchController);\n\n  const [input, setInput] = useState<HTMLInputElement | null>(null);\n  // Was the most recent pointerdown inside the search widget? Used to disambiguate a blur with a\n  // null `relatedTarget`: browsers report `null` both when focus genuinely leaves the widget AND\n  // when the user presses a non-focusable descendant (the search icon, wrapper padding). Only the\n  // former should collapse search.\n  const pointerDownInsideRef = useRef(false);\n  const { isActive, searchQuery } = useStateStore(\n    searchController.state,\n    searchControllerStateSelector,\n  );\n\n  useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      pointerDownInsideRef.current = !!containerRef.current?.contains(\n        event.target as Node | null,\n      );\n    };\n    // Capture so it runs before the input's blur, regardless of where the press landed.\n    document.addEventListener('pointerdown', handlePointerDown, true);\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown, true);\n    };\n  }, [containerRef]);\n\n  useEffect(() => {\n    if (!input) return;\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        searchController.exit();\n        // Keep focus on the search input (it no longer re-activates search on focus), so the user\n        // can keep navigating from a known place rather than having focus drop to the body.\n        input.focus();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [searchController, input]);\n\n  return (\n    <div className='str-chat__search-bar' data-testid='search-bar' role='search'>\n      <div\n        className={clsx('str-chat__search-bar__input-wrapper', {\n          'str-chat__search-bar__input-wrapper--active': isActive,\n        })}\n      >\n        <IconSearch />\n        <input\n          {...inputProps}\n          aria-label={t('common.search.ariaLabel', 'Search')}\n          className={clsx('str-chat__search-bar__input', inputProps?.className)}\n          data-testid='search-input'\n          disabled={disabled}\n          onBlur={({ relatedTarget }) => {\n            // Exit search only when focus leaves the search widget entirely. Moving focus to a\n            // control inside it — the results list, the source filter buttons, the clear button,\n            // or the Cancel/exit button — is not \"leaving search\", so it must not collapse it (the\n            // Cancel button exits via its own activation, per WCAG 3.2.1). This matches the\n            // documented contract (\"clear on every click outside the search\") independent of\n            // whether the input currently holds a query — an empty input is not activated, so the\n            // previous value check only ever suppressed the exit while a query was present.\n            if (!exitSearchOnInputBlur) return;\n            const focusMovedInside = !!containerRef.current?.contains(relatedTarget);\n            // A null relatedTarget also occurs when a non-focusable element inside the widget is\n            // pressed; the preceding pointerdown tells us it was an in-widget interaction, which\n            // must not collapse search.\n            const pressedInside = relatedTarget === null && pointerDownInsideRef.current;\n            pointerDownInsideRef.current = false;\n            if (!focusMovedInside && !pressedInside) {\n              searchController.exit();\n            }\n          }}\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n            // Activate search on user input — NOT on focus (WCAG 3.2.1: focusing a control must not\n            // change context). `search()` runs against the active sources, so activation has to\n            // happen here; `activate()` is idempotent once already active.\n            if (event.target.value) {\n              searchController.activate();\n              searchController.search(event.target.value);\n            } else {\n              searchController.clear();\n            }\n          }}\n          placeholder={placeholder ?? t('common.search.ariaLabel', 'Search')}\n          ref={setInput}\n          type='text'\n          value={searchQuery}\n        />\n        {searchQuery && (\n          <Button\n            appearance='ghost'\n            aria-label={t('search.bar.clearSearch.ariaLabel', 'Clear search')}\n            circular\n            className='str-chat__search-bar__clear-button'\n            data-testid='clear-input-button'\n            disabled={queriesInProgress.length > 0} // prevent user from clearing the input while query is in progress and avoid out-of-sync UX\n            onClick={() => {\n              searchController.clear();\n              input?.focus();\n              announceInteraction('search.cleared');\n            }}\n            size='xs'\n            variant='secondary'\n          >\n            <IconXCircle />\n          </Button>\n        )}\n      </div>\n      {isActive && (\n        <Button\n          appearance='ghost'\n          aria-label={t('search.bar.exitSearch.ariaLabel', 'Exit search')}\n          className='str-chat__search-bar__exit-search-button'\n          data-testid='search-bar-button'\n          onClick={() => {\n            searchController.exit();\n            // Return focus to the search input so navigation can continue from there (focusing it\n            // no longer re-activates search — see RW19).\n            input?.focus();\n          }}\n          size='sm'\n          variant='secondary'\n        >\n          {t('common.cancel.label', 'Cancel')}\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,iCAAiC,eAAsC;CAC3E,UAAU,UAAU;CACpB,aAAa,UAAU;AACzB;AAEA,IAAa,kBAAkB;CAC7B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,gBAAgB,yBAAyB;CAC7D,MAAM,EAAE,wBAAwB,4BAA4B;CAC5D,MAAM,EACJ,cACA,UACA,uBACA,YACA,aACA,qBACE,iBAAiB;CACrB,MAAM,oBAAoB,2BAA2B,gBAAgB;CAErE,MAAM,CAAC,OAAO,YAAY,SAAkC,IAAI;CAKhE,MAAM,uBAAuB,OAAO,KAAK;CACzC,MAAM,EAAE,UAAU,gBAAgB,cAChC,iBAAiB,OACjB,6BACF;CAEA,gBAAgB;EACd,MAAM,qBAAqB,UAAwB;GACjD,qBAAqB,UAAU,CAAC,CAAC,aAAa,SAAS,SACrD,MAAM,MACR;EACF;EAEA,SAAS,iBAAiB,eAAe,mBAAmB,IAAI;EAChE,aAAa;GACX,SAAS,oBAAoB,eAAe,mBAAmB,IAAI;EACrE;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,UAAU;IAC1B,iBAAiB,KAAK;IAGtB,MAAM,MAAM;GACd;EACF;EAEA,SAAS,iBAAiB,WAAW,aAAa;EAClD,aAAa;GACX,SAAS,oBAAoB,WAAW,aAAa;EACvD;CACF,GAAG,CAAC,kBAAkB,KAAK,CAAC;CAE5B,OACE,qBAAC,OAAD;EAAK,WAAU;EAAuB,eAAY;EAAa,MAAK;YAApE,CACE,qBAAC,OAAD;GACE,WAAW,KAAK,uCAAuC,EACrD,+CAA+C,SACjD,CAAC;aAHH;IAKE,oBAAC,YAAD,CAAa,CAAA;IACb,oBAAC,SAAD;KACE,GAAI;KACJ,cAAY,EAAE,2BAA2B,QAAQ;KACjD,WAAW,KAAK,+BAA+B,YAAY,SAAS;KACpE,eAAY;KACF;KACV,SAAS,EAAE,oBAAoB;MAQ7B,IAAI,CAAC,uBAAuB;MAC5B,MAAM,mBAAmB,CAAC,CAAC,aAAa,SAAS,SAAS,aAAa;MAIvE,MAAM,gBAAgB,kBAAkB,QAAQ,qBAAqB;MACrE,qBAAqB,UAAU;MAC/B,IAAI,CAAC,oBAAoB,CAAC,eACxB,iBAAiB,KAAK;KAE1B;KACA,WAAW,UAA+C;MAIxD,IAAI,MAAM,OAAO,OAAO;OACtB,iBAAiB,SAAS;OAC1B,iBAAiB,OAAO,MAAM,OAAO,KAAK;MAC5C,OACE,iBAAiB,MAAM;KAE3B;KACA,aAAa,eAAe,EAAE,2BAA2B,QAAQ;KACjE,KAAK;KACL,MAAK;KACL,OAAO;IACR,CAAA;IACA,eACC,oBAAC,QAAD;KACE,YAAW;KACX,cAAY,EAAE,oCAAoC,cAAc;KAChE,UAAA;KACA,WAAU;KACV,eAAY;KACZ,UAAU,kBAAkB,SAAS;KACrC,eAAe;MACb,iBAAiB,MAAM;MACvB,OAAO,MAAM;MACb,oBAAoB,gBAAgB;KACtC;KACA,MAAK;KACL,SAAQ;eAER,oBAAC,aAAD,CAAc,CAAA;IACR,CAAA;GAEP;MACJ,YACC,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,mCAAmC,aAAa;GAC9D,WAAU;GACV,eAAY;GACZ,eAAe;IACb,iBAAiB,KAAK;IAGtB,OAAO,MAAM;GACf;GACA,MAAK;GACL,SAAQ;aAEP,EAAE,uBAAuB,QAAQ;EAC5B,CAAA,CAEP;;AAET"}

package/dist/es/components/Search/SearchContext.mjs

@@ -1,3 +1,4 @@
+import { requireContext } from "../../context/requireContext.mjs";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Search/SearchContext.tsx
@@ -9,9 +10,7 @@ var SearchContextProvider = ({ children, value }) => /* @__PURE__ */ jsx(SearchC
 	value,
 	children
 });
-var useSearchContext = () => {
-	return useContext(SearchContext);
-};
+var useSearchContext = () => requireContext(useContext(SearchContext), "useSearchContext", "SearchContextProvider");
 //#endregion
 export { SearchContext, SearchContextProvider, useSearchContext };
 

package/dist/es/components/Search/SearchContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchContext.mjs","names":[],"sources":["../../../../src/components/Search/SearchContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\nimport type { SearchController } from 'stream-chat';\nimport type { SearchProps } from './Search';\n\nexport type SearchContextValue = {\n  /** Instance of the search controller that handles the data management */\n  searchController: SearchController;\n  /** Reference to the container element of the search component */\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  /** Reference to the container element of the filter buttons */\n  filterButtonsContainerRef: React.RefObject<HTMLDivElement | null>;\n} & Pick<SearchProps, 'disabled' | 'inputProps' | 'placeholder'> &\n  Required<Pick<SearchProps, 'exitSearchOnInputBlur' | 'directMessagingChannelType'>>;\n\nexport const SearchContext = createContext<SearchContextValue | undefined>(undefined);\n\n/**\n * Context provider for components rendered within the `Search` component\n */\nexport const SearchContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: SearchContextValue;\n}>) => (\n  <SearchContext.Provider value={value as unknown as SearchContextValue}>\n    {children}\n  </SearchContext.Provider>\n);\n\nexport const useSearchContext = () => {\n  const contextValue = useContext(SearchContext);\n  return contextValue as unknown as SearchContextValue;\n};\n"],"mappings":";;;AAeA,IAAa,gBAAgB,cAA8C,KAAA,CAAS;;;;AAKpF,IAAa,yBAAyB,EACpC,UACA,YAIA,oBAAC,cAAc,UAAf;CAA+B;CAC5B;AACqB,CAAA;AAG1B,IAAa,yBAAyB;CAEpC,OADqB,WAAW,aACzB;AACT"}
+{"version":3,"file":"SearchContext.mjs","names":[],"sources":["../../../../src/components/Search/SearchContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\nimport type { SearchController } from 'stream-chat';\nimport type { SearchProps } from './Search';\nimport { requireContext } from '../../context/requireContext';\n\nexport type SearchContextValue = {\n  /** Instance of the search controller that handles the data management */\n  searchController: SearchController;\n  /** Reference to the container element of the search component */\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  /** Reference to the container element of the filter buttons */\n  filterButtonsContainerRef: React.RefObject<HTMLDivElement | null>;\n} & Pick<SearchProps, 'disabled' | 'inputProps' | 'placeholder'> &\n  Required<Pick<SearchProps, 'exitSearchOnInputBlur' | 'directMessagingChannelType'>>;\n\nexport const SearchContext = createContext<SearchContextValue | undefined>(undefined);\n\n/**\n * Context provider for components rendered within the `Search` component\n */\nexport const SearchContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: SearchContextValue;\n}>) => (\n  <SearchContext.Provider value={value as unknown as SearchContextValue}>\n    {children}\n  </SearchContext.Provider>\n);\n\nexport const useSearchContext = () =>\n  requireContext(useContext(SearchContext), 'useSearchContext', 'SearchContextProvider');\n"],"mappings":";;;;AAgBA,IAAa,gBAAgB,cAA8C,KAAA,CAAS;;;;AAKpF,IAAa,yBAAyB,EACpC,UACA,YAIA,oBAAC,cAAc,UAAf;CAA+B;CAC5B;AACqB,CAAA;AAG1B,IAAa,yBACX,eAAe,WAAW,aAAa,GAAG,oBAAoB,uBAAuB"}

package/dist/es/components/Search/SearchResults/SearchResultItem.mjs

@@ -1,86 +1,103 @@
-import { useChannelListContext } from "../../../context/ChannelListContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Timestamp } from "../../Message/Timestamp.mjs";
 import { Avatar } from "../../Avatar/Avatar.mjs";
 import { extractDisplayInfo } from "../../Avatar/utils.mjs";
-import { Timestamp } from "../../Message/Timestamp.mjs";
 import { useSearchContext } from "../SearchContext.mjs";
 import { ChannelListItem } from "../../ChannelListItem/ChannelListItem.mjs";
+import { useWorkspaceNavigation } from "../../../context/WorkspaceNavigationContext.mjs";
 import { useCallback, useMemo } from "react";
+import { convertTimestampToDate, formatMessage } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
-import uniqBy from "lodash.uniqby";
 //#region src/components/Search/SearchResults/SearchResultItem.tsx
-var ChannelSearchResultItem = ({ item }) => {
-	const { setActiveChannel } = useChatContext();
-	const { setChannels } = useChannelListContext();
+var messageFocusSignalSelector = (state) => ({ focusedMessageId: state.signal?.messageId });
+var ChannelSearchResultItem = ({ item, onSelect }) => {
+	const { openChannel } = useWorkspaceNavigation();
+	const { channelManager } = useChatContext();
 	return /* @__PURE__ */ jsx(ChannelListItem, {
 		channel: item,
 		className: "str-chat__search-result",
-		onSelect: useCallback(() => {
-			setActiveChannel(item);
-			setChannels?.((channels) => uniqBy([item, ...channels], "cid"));
+		onSelect: useCallback((event) => {
+			if (onSelect) {
+				onSelect(event);
+				return;
+			}
+			openChannel(item, { event });
+			channelManager.ingestChannel(item);
 		}, [
 			item,
-			setActiveChannel,
-			setChannels
+			openChannel,
+			channelManager,
+			onSelect
 		])
 	});
 };
-var MessageSearchResultItem = ({ item }) => {
-	const { channel: activeChannel, client, searchController, setActiveChannel } = useChatContext();
-	const { setChannels } = useChannelListContext();
+var MessageSearchResultItem = ({ item, onSelect }) => {
+	const { channelManager, client } = useChatContext();
+	const { isChannelActive, openChannel } = useWorkspaceNavigation();
 	const channel = useMemo(() => {
 		const { channel: channelData } = item;
 		const type = channelData?.type ?? "unknown";
 		const id = channelData?.id ?? "unknown";
 		return client.channel(type, id);
 	}, [client, item]);
-	const onSelect = useCallback(async () => {
+	const channelOpenInSlot = isChannelActive(channel?.cid ?? void 0);
+	const { focusedMessageId } = useStateStore(channel?.messagePaginator.messageFocusSignal, messageFocusSignalSelector) ?? { focusedMessageId: void 0 };
+	const handleSelect = useCallback((event) => {
+		if (onSelect) {
+			onSelect(event);
+			return;
+		}
 		if (!channel) return;
-		await channel.state.loadMessageIntoState(item.id, void 0, 25);
-		searchController._internalState.partialNext({ focusedMessage: item });
-		setActiveChannel(channel);
-		setChannels?.((channels) => uniqBy([channel, ...channels], "cid"));
+		openChannel(channel, { event });
+		channelManager.ingestChannel(channel);
+		channel.messagePaginator.jumpToMessage(item.id);
 	}, [
 		channel,
 		item,
-		searchController,
-		setActiveChannel,
-		setChannels
+		openChannel,
+		channelManager,
+		onSelect
 	]);
-	const getLatestMessagePreview = useCallback(() => item.text, [item]);
+	const previewedMessage = useMemo(() => formatMessage(item), [item]);
 	if (!channel) return null;
 	return /* @__PURE__ */ jsx(ChannelListItem, {
-		active: channel.cid === activeChannel?.cid && item.id === searchController._internalState.getLatestValue().focusedMessage?.id,
+		active: channelOpenInSlot && focusedMessageId === item.id,
 		channel,
 		className: "str-chat__search-result",
-		getLatestMessagePreview,
-		onSelect
+		onSelect: handleSelect,
+		previewedMessage
 	});
 };
-var UserSearchResultItem = ({ item }) => {
-	const { client, setActiveChannel } = useChatContext();
-	const { setChannels } = useChannelListContext();
+var UserSearchResultItem = ({ item, onSelect }) => {
+	const { channelManager, client } = useChatContext();
+	const { openChannel } = useWorkspaceNavigation();
 	const { directMessagingChannelType } = useSearchContext();
 	const { t } = useTranslationContext();
 	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
-	const onClick = useCallback(() => {
-		const newChannel = client.channel(directMessagingChannelType, { members: [client.userID, item.id] });
+	const onClick = useCallback((event) => {
+		if (onSelect) {
+			onSelect(event);
+			return;
+		}
+		const newChannel = client.channel(directMessagingChannelType, { members: [{ user_id: client.userId }, { user_id: item.id }] });
 		newChannel.watch();
-		setActiveChannel(newChannel);
-		setChannels?.((channels) => uniqBy([newChannel, ...channels], "cid"));
+		openChannel(newChannel, { event });
+		channelManager.ingestChannel(newChannel);
 	}, [
 		client,
 		item,
-		setActiveChannel,
-		setChannels,
-		directMessagingChannelType
+		openChannel,
+		channelManager,
+		directMessagingChannelType,
+		onSelect
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "str-chat__search-result-container",
 		children: /* @__PURE__ */ jsxs("button", {
-			"aria-label": t("aria/Select User Channel: {{ name }}", { name: item.name || "" }),
+			"aria-label": t("search.resultItem.selectUserChannel.ariaLabel", "Select User Channel: {{ name }}", { name: item.name || "" }),
 			className: "str-chat__search-result str-chat__search-result--user",
 			"data-testid": "search-result-user",
 			onClick,
@@ -93,10 +110,10 @@ var UserSearchResultItem = ({ item }) => {
 				className: "str-chat__search-result-data",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "str-chat__search-result__display-name",
-					children: item.name || item.username || item.id
+					children: item.name || item.custom?.username || item.id
 				}), /* @__PURE__ */ jsx(Timestamp, {
 					customClass: "str-chat__search-result__last-active-timestamp",
-					timestamp: item.last_active
+					timestamp: convertTimestampToDate(item.last_active)
 				})]
 			})]
 		})

package/dist/es/components/Search/SearchResults/SearchResultItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultItem.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchResultItem.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport uniqBy from 'lodash.uniqby';\nimport type { ComponentType } from 'react';\nimport type { Channel, MessageResponse, User } from 'stream-chat';\n\nimport { useSearchContext } from '../SearchContext';\nimport { Avatar as DefaultAvatar } from '../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../components/Avatar/utils';\nimport { ChannelListItem } from '../../../components/ChannelListItem';\nimport {\n  useChannelListContext,\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../../context';\nimport { DEFAULT_JUMP_TO_PAGE_SIZE } from '../../../constants/limits';\nimport { Timestamp } from '../../../components/Message/Timestamp';\n\nexport type ChannelSearchResultItemProps = {\n  item: Channel;\n};\n\nexport const ChannelSearchResultItem = ({ item }: ChannelSearchResultItemProps) => {\n  const { setActiveChannel } = useChatContext();\n  const { setChannels } = useChannelListContext();\n\n  const onSelect = useCallback(() => {\n    setActiveChannel(item);\n    setChannels?.((channels) => uniqBy([item, ...channels], 'cid'));\n  }, [item, setActiveChannel, setChannels]);\n\n  return (\n    <ChannelListItem\n      channel={item}\n      className='str-chat__search-result'\n      onSelect={onSelect}\n    />\n  );\n};\n\nexport type ChannelByMessageSearchResultItemProps = {\n  item: MessageResponse;\n};\n\nexport const MessageSearchResultItem = ({\n  item,\n}: ChannelByMessageSearchResultItemProps) => {\n  const {\n    channel: activeChannel,\n    client,\n    searchController,\n    setActiveChannel,\n  } = useChatContext();\n  const { setChannels } = useChannelListContext();\n\n  const channel = useMemo(() => {\n    const { channel: channelData } = item;\n    const type = channelData?.type ?? 'unknown';\n    const id = channelData?.id ?? 'unknown';\n    return client.channel(type, id);\n  }, [client, item]);\n\n  const onSelect = useCallback(async () => {\n    if (!channel) return;\n    await channel.state.loadMessageIntoState(\n      item.id,\n      undefined,\n      DEFAULT_JUMP_TO_PAGE_SIZE,\n    );\n    // FIXME: message focus should be handled by yet non-existent msg list controller in client packaged\n    searchController._internalState.partialNext({ focusedMessage: item });\n    setActiveChannel(channel);\n    setChannels?.((channels) => uniqBy([channel, ...channels], 'cid'));\n  }, [channel, item, searchController, setActiveChannel, setChannels]);\n\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const getLatestMessagePreview = useCallback(() => item.text!, [item]);\n\n  if (!channel) return null;\n\n  return (\n    <ChannelListItem\n      active={\n        channel.cid === activeChannel?.cid &&\n        item.id === searchController._internalState.getLatestValue().focusedMessage?.id\n      }\n      channel={channel}\n      className='str-chat__search-result'\n      getLatestMessagePreview={getLatestMessagePreview}\n      onSelect={onSelect}\n    />\n  );\n};\n\nexport type UserSearchResultItemProps = {\n  item: User;\n};\n\nexport const UserSearchResultItem = ({ item }: UserSearchResultItemProps) => {\n  const { client, setActiveChannel } = useChatContext();\n  const { setChannels } = useChannelListContext();\n  const { directMessagingChannelType } = useSearchContext();\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n\n  const onClick = useCallback(() => {\n    const newChannel = client.channel(directMessagingChannelType, {\n      members: [client.userID as string, item.id],\n    });\n    newChannel.watch();\n    setActiveChannel(newChannel);\n    setChannels?.((channels) => uniqBy([newChannel, ...channels], 'cid'));\n  }, [client, item, setActiveChannel, setChannels, directMessagingChannelType]);\n\n  return (\n    <div className='str-chat__search-result-container'>\n      <button\n        aria-label={t('aria/Select User Channel: {{ name }}', {\n          name: item.name || '',\n        })}\n        className='str-chat__search-result str-chat__search-result--user'\n        data-testid='search-result-user'\n        onClick={onClick}\n        role='option'\n      >\n        <Avatar\n          {...extractDisplayInfo({ user: item })}\n          isOnline={item.online}\n          size='xl'\n        />\n        <div className='str-chat__search-result-data'>\n          <div className='str-chat__search-result__display-name'>\n            {item.name || item.username || item.id}\n          </div>\n          <Timestamp\n            customClass='str-chat__search-result__last-active-timestamp'\n            timestamp={item.last_active}\n          />\n        </div>\n      </button>\n    </div>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type SearchResultItemComponents = Record<string, ComponentType<{ item: any }>>;\n\nexport const DefaultSearchResultItems: SearchResultItemComponents = {\n  channels: ChannelSearchResultItem,\n  messages: MessageSearchResultItem,\n  users: UserSearchResultItem,\n};\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAa,2BAA2B,EAAE,WAAyC;CACjF,MAAM,EAAE,qBAAqB,eAAe;CAC5C,MAAM,EAAE,gBAAgB,sBAAsB;CAO9C,OACE,oBAAC,iBAAD;EACE,SAAS;EACT,WAAU;EACA,UATG,kBAAkB;GACjC,iBAAiB,IAAI;GACrB,eAAe,aAAa,OAAO,CAAC,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;EAChE,GAAG;GAAC;GAAM;GAAkB;EAAW,CAMzB;CACX,CAAA;AAEL;AAMA,IAAa,2BAA2B,EACtC,WAC2C;CAC3C,MAAM,EACJ,SAAS,eACT,QACA,kBACA,qBACE,eAAe;CACnB,MAAM,EAAE,gBAAgB,sBAAsB;CAE9C,MAAM,UAAU,cAAc;EAC5B,MAAM,EAAE,SAAS,gBAAgB;EACjC,MAAM,OAAO,aAAa,QAAQ;EAClC,MAAM,KAAK,aAAa,MAAM;EAC9B,OAAO,OAAO,QAAQ,MAAM,EAAE;CAChC,GAAG,CAAC,QAAQ,IAAI,CAAC;CAEjB,MAAM,WAAW,YAAY,YAAY;EACvC,IAAI,CAAC,SAAS;EACd,MAAM,QAAQ,MAAM,qBAClB,KAAK,IACL,KAAA,GAAA,EAEF;EAEA,iBAAiB,eAAe,YAAY,EAAE,gBAAgB,KAAK,CAAC;EACpE,iBAAiB,OAAO;EACxB,eAAe,aAAa,OAAO,CAAC,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;CACnE,GAAG;EAAC;EAAS;EAAM;EAAkB;EAAkB;CAAW,CAAC;CAGnE,MAAM,0BAA0B,kBAAkB,KAAK,MAAO,CAAC,IAAI,CAAC;CAEpE,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,iBAAD;EACE,QACE,QAAQ,QAAQ,eAAe,OAC/B,KAAK,OAAO,iBAAiB,eAAe,eAAe,CAAC,CAAC,gBAAgB;EAEtE;EACT,WAAU;EACe;EACf;CACX,CAAA;AAEL;AAMA,IAAa,wBAAwB,EAAE,WAAsC;CAC3E,MAAM,EAAE,QAAQ,qBAAqB,eAAe;CACpD,MAAM,EAAE,gBAAgB,sBAAsB;CAC9C,MAAM,EAAE,+BAA+B,iBAAiB;CACxD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,QAAA,WAAS,QAAe,oBAAA,uBAAqB,uBACnD,oBAAoB;CAEtB,MAAM,UAAU,kBAAkB;EAChC,MAAM,aAAa,OAAO,QAAQ,4BAA4B,EAC5D,SAAS,CAAC,OAAO,QAAkB,KAAK,EAAE,EAC5C,CAAC;EACD,WAAW,MAAM;EACjB,iBAAiB,UAAU;EAC3B,eAAe,aAAa,OAAO,CAAC,YAAY,GAAG,QAAQ,GAAG,KAAK,CAAC;CACtE,GAAG;EAAC;EAAQ;EAAM;EAAkB;EAAa;CAA0B,CAAC;CAE5E,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,UAAD;GACE,cAAY,EAAE,wCAAwC,EACpD,MAAM,KAAK,QAAQ,GACrB,CAAC;GACD,WAAU;GACV,eAAY;GACH;GACT,MAAK;aAPP,CASE,oBAAC,UAAD;IACE,GAAI,qBAAmB,EAAE,MAAM,KAAK,CAAC;IACrC,UAAU,KAAK;IACf,MAAK;GACN,CAAA,GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ,KAAK,QAAQ,KAAK,YAAY,KAAK;IACjC,CAAA,GACL,oBAAC,WAAD;KACE,aAAY;KACZ,WAAW,KAAK;IACjB,CAAA,CACE;KACC;;CACL,CAAA;AAET;AAKA,IAAa,2BAAuD;CAClE,UAAU;CACV,UAAU;CACV,OAAO;AACT"}
+{"version":3,"file":"SearchResultItem.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchResultItem.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport type { ComponentType } from 'react';\nimport { convertTimestampToDate, formatMessage } from 'stream-chat';\nimport type {\n  Channel,\n  ChannelResponse,\n  MessageFocusSignalState,\n  MessageResponse,\n  UserResponse,\n} from 'stream-chat';\n\nimport { useSearchContext } from '../SearchContext';\nimport { Avatar as DefaultAvatar } from '../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../components/Avatar/utils';\nimport { ChannelListItem } from '../../../components/ChannelListItem';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n  useWorkspaceNavigation,\n} from '../../../context';\nimport { Timestamp } from '../../../components/Message/Timestamp';\nimport { useStateStore } from '../../../store';\n\ntype SearchResultMessage = MessageResponse & { channel?: ChannelResponse };\n\nconst messageFocusSignalSelector = (state: MessageFocusSignalState) => ({\n  focusedMessageId: state.signal?.messageId,\n});\n\nexport type ChannelSearchResultItemProps = {\n  item: Channel;\n  /** Overrides selection, exactly like `ChannelListItem`'s `onSelect`: when provided it runs\n   *  instead of the default (open the channel into a layout slot). */\n  onSelect?: (event: React.MouseEvent) => void;\n};\n\nexport const ChannelSearchResultItem = ({\n  item,\n  onSelect,\n}: ChannelSearchResultItemProps) => {\n  const { openChannel } = useWorkspaceNavigation();\n  const { channelManager } = useChatContext();\n\n  const handleSelect = useCallback(\n    (event: React.MouseEvent) => {\n      if (onSelect) {\n        onSelect(event);\n        return;\n      }\n      // Default: open the channel in the workspace, forwarding the event so a consumer overriding\n      // `openChannel` (e.g. via ChatView's `deriveWorkspaceNavigation`) can honor ⌘/ctrl-click.\n      openChannel(item, { event });\n      // Route the channel into the list(s) that should own it (the channel manager dedupes by cid,\n      // inserts in sort order, and honors ownership/filters) so it appears without a re-query.\n      channelManager.ingestChannel(item);\n    },\n    [item, openChannel, channelManager, onSelect],\n  );\n\n  return (\n    <ChannelListItem\n      channel={item}\n      className='str-chat__search-result'\n      onSelect={handleSelect}\n    />\n  );\n};\n\nexport type ChannelByMessageSearchResultItemProps = {\n  item: SearchResultMessage;\n  /** Overrides selection (see `ChannelSearchResultItem`); when provided it runs instead of the\n   *  default (jump to the message and open its channel). */\n  onSelect?: (event: React.MouseEvent) => void;\n};\n\nexport const MessageSearchResultItem = ({\n  item,\n  onSelect,\n}: ChannelByMessageSearchResultItemProps) => {\n  const { channelManager, client } = useChatContext();\n  const { isChannelActive, openChannel } = useWorkspaceNavigation();\n\n  const channel = useMemo(() => {\n    const { channel: channelData } = item;\n    const type = channelData?.type ?? 'unknown';\n    const id = channelData?.id ?? 'unknown';\n    return client.channel(type, id);\n  }, [client, item]);\n\n  const channelOpenInSlot = isChannelActive(channel?.cid ?? undefined);\n  const { focusedMessageId } = useStateStore(\n    channel?.messagePaginator.messageFocusSignal,\n    messageFocusSignalSelector,\n  ) ?? { focusedMessageId: undefined };\n\n  const handleSelect = useCallback(\n    (event: React.MouseEvent) => {\n      if (onSelect) {\n        onSelect(event);\n        return;\n      }\n      if (!channel) return;\n      openChannel(channel, { event });\n      channelManager.ingestChannel(channel);\n      void channel.messagePaginator.jumpToMessage(item.id);\n    },\n    [channel, item, openChannel, channelManager, onSelect],\n  );\n\n  // Preview the matched message itself (not the channel's latest) by overriding `previewedMessage`.\n  const previewedMessage = useMemo(() => formatMessage(item), [item]);\n\n  if (!channel) return null;\n\n  return (\n    <ChannelListItem\n      active={channelOpenInSlot && focusedMessageId === item.id}\n      channel={channel}\n      className='str-chat__search-result'\n      onSelect={handleSelect}\n      previewedMessage={previewedMessage}\n    />\n  );\n};\n\nexport type UserSearchResultItemProps = {\n  item: UserResponse;\n  /** Overrides selection (see `ChannelSearchResultItem`); when provided it runs instead of the\n   *  default (open a direct-messaging channel with the user). */\n  onSelect?: (event: React.MouseEvent) => void;\n};\n\nexport const UserSearchResultItem = ({ item, onSelect }: UserSearchResultItemProps) => {\n  const { channelManager, client } = useChatContext();\n  const { openChannel } = useWorkspaceNavigation();\n  const { directMessagingChannelType } = useSearchContext();\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (onSelect) {\n        onSelect(event);\n        return;\n      }\n      const newChannel = client.channel(directMessagingChannelType, {\n        members: [{ user_id: client.userId as string }, { user_id: item.id }],\n      });\n      newChannel.watch();\n      // Default: open the DM channel in the workspace, forwarding the event so a consumer overriding\n      // `openChannel` can honor ⌘/ctrl-click.\n      openChannel(newChannel, { event });\n      channelManager.ingestChannel(newChannel);\n    },\n    [client, item, openChannel, channelManager, directMessagingChannelType, onSelect],\n  );\n\n  return (\n    <div className='str-chat__search-result-container'>\n      <button\n        aria-label={t(\n          'search.resultItem.selectUserChannel.ariaLabel',\n          'Select User Channel: {{ name }}',\n          {\n            name: item.name || '',\n          },\n        )}\n        className='str-chat__search-result str-chat__search-result--user'\n        data-testid='search-result-user'\n        onClick={onClick}\n        role='option'\n      >\n        <Avatar\n          {...extractDisplayInfo({ user: item })}\n          isOnline={item.online}\n          size='xl'\n        />\n        <div className='str-chat__search-result-data'>\n          <div className='str-chat__search-result__display-name'>\n            {/* @ts-expect-error username is not typed */}\n            {item.name || item.custom?.username || item.id}\n          </div>\n          <Timestamp\n            customClass='str-chat__search-result__last-active-timestamp'\n            timestamp={convertTimestampToDate(item.last_active)}\n          />\n        </div>\n      </button>\n    </div>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type SearchResultItemComponents = Record<string, ComponentType<{ item: any }>>;\n\nexport const DefaultSearchResultItems: SearchResultItemComponents = {\n  channels: ChannelSearchResultItem,\n  messages: MessageSearchResultItem,\n  users: UserSearchResultItem,\n};\n"],"mappings":"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"}

package/dist/es/components/Search/SearchResults/SearchResults.mjs

@@ -1,9 +1,9 @@
-import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useSearchContext } from "../SearchContext.mjs";
 import { useAnnounceSearchResultCount } from "../hooks/useAnnounceSearchResultCount.mjs";
 import { useSearchResultsKeyboardNavigation } from "../hooks/useSearchResultsKeyboardNavigation.mjs";
-import { useSearchContext } from "../SearchContext.mjs";
 import { SearchSourceResults } from "./SearchSourceResults.mjs";
 import { SearchResultsHeader } from "./SearchResultsHeader.mjs";
 import { SearchResultsPresearch } from "./SearchResultsPresearch.mjs";
@@ -16,7 +16,7 @@ var searchControllerStateSelector = (nextValue) => ({
 	searchQuery: nextValue.searchQuery
 });
 var SearchResults = () => {
-	const { t } = useTranslationContext("ResultsContainer");
+	const { t } = useTranslationContext();
 	const { SearchResultsHeader: SearchResultsHeader$1 = SearchResultsHeader, SearchResultsPresearch: SearchResultsPresearch$1 = SearchResultsPresearch, SearchSourceResults: SearchSourceResults$1 = SearchSourceResults } = useComponentContext();
 	const { searchController } = useSearchContext();
 	const { activeSources, isActive, searchQuery } = useStateStore(searchController.state, searchControllerStateSelector);
@@ -24,7 +24,7 @@ var SearchResults = () => {
 	const { onKeyDown } = useSearchResultsKeyboardNavigation(resultsRef);
 	useAnnounceSearchResultCount(resultsRef, isActive && !!searchQuery, activeSources);
 	return !isActive ? null : /* @__PURE__ */ jsxs("div", {
-		"aria-label": t("aria/Search results"),
+		"aria-label": t("search.results.searchResults.ariaLabel", "Search results"),
 		className: "str-chat__search-results",
 		onKeyDown,
 		ref: resultsRef,

package/dist/es/components/Search/SearchResults/SearchResults.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchResults.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport type { SearchControllerState } from 'stream-chat';\n\nimport { SearchSourceResults as DefaultSourceSearchResults } from './SearchSourceResults';\nimport { SearchResultsHeader as DefaultSearchResultsHeader } from './SearchResultsHeader';\nimport { SearchResultsPresearch as DefaultSearchResultsPresearch } from './SearchResultsPresearch';\nimport { useSearchContext } from '../SearchContext';\nimport {\n  useAnnounceSearchResultCount,\n  useSearchResultsKeyboardNavigation,\n} from '../hooks';\nimport { useComponentContext, useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst searchControllerStateSelector = (nextValue: SearchControllerState) => ({\n  activeSources: nextValue.sources.filter((s) => s.isActive),\n  isActive: nextValue.isActive,\n  searchQuery: nextValue.searchQuery,\n});\n\nexport const SearchResults = () => {\n  const { t } = useTranslationContext('ResultsContainer');\n  const {\n    SearchResultsHeader = DefaultSearchResultsHeader,\n    SearchResultsPresearch = DefaultSearchResultsPresearch,\n    SearchSourceResults = DefaultSourceSearchResults,\n  } = useComponentContext();\n  const { searchController } = useSearchContext();\n  const { activeSources, isActive, searchQuery } = useStateStore(\n    searchController.state,\n    searchControllerStateSelector,\n  );\n\n  const resultsRef = useRef<HTMLDivElement | null>(null);\n  const { onKeyDown } = useSearchResultsKeyboardNavigation(resultsRef);\n  // Announce the number of listed results once the list settles (only while a query is in progress,\n  // not during presearch); the end-of-list status rides along in that same announcement.\n  useAnnounceSearchResultCount(resultsRef, isActive && !!searchQuery, activeSources);\n\n  return !isActive ? null : (\n    <div\n      aria-label={t('aria/Search results')}\n      className='str-chat__search-results'\n      onKeyDown={onKeyDown}\n      ref={resultsRef}\n    >\n      <SearchResultsHeader />\n      {!searchQuery ? (\n        <SearchResultsPresearch activeSources={activeSources} />\n      ) : (\n        activeSources.map((source) => (\n          <SearchSourceResults key={source.type} searchSource={source} />\n        ))\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,iCAAiC,eAAsC;CAC3E,eAAe,UAAU,QAAQ,QAAQ,MAAM,EAAE,QAAQ;CACzD,UAAU,UAAU;CACpB,aAAa,UAAU;AACzB;AAEA,IAAa,sBAAsB;CACjC,MAAM,EAAE,MAAM,sBAAsB,kBAAkB;CACtD,MAAM,EACJ,qBAAA,wBAAsB,qBACtB,wBAAA,2BAAyB,wBACzB,qBAAA,wBAAsB,wBACpB,oBAAoB;CACxB,MAAM,EAAE,qBAAqB,iBAAiB;CAC9C,MAAM,EAAE,eAAe,UAAU,gBAAgB,cAC/C,iBAAiB,OACjB,6BACF;CAEA,MAAM,aAAa,OAA8B,IAAI;CACrD,MAAM,EAAE,cAAc,mCAAmC,UAAU;CAGnE,6BAA6B,YAAY,YAAY,CAAC,CAAC,aAAa,aAAa;CAEjF,OAAO,CAAC,WAAW,OACjB,qBAAC,OAAD;EACE,cAAY,EAAE,qBAAqB;EACnC,WAAU;EACC;EACX,KAAK;YAJP,CAME,oBAAC,uBAAD,CAAsB,CAAA,GACrB,CAAC,cACA,oBAAC,0BAAD,EAAuC,cAAgB,CAAA,IAEvD,cAAc,KAAK,WACjB,oBAAC,uBAAD,EAAuC,cAAc,OAAS,GAApC,OAAO,IAA6B,CAC/D,CAEA;;AAET"}
+{"version":3,"file":"SearchResults.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchResults.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport type { SearchControllerState } from 'stream-chat';\n\nimport { SearchSourceResults as DefaultSourceSearchResults } from './SearchSourceResults';\nimport { SearchResultsHeader as DefaultSearchResultsHeader } from './SearchResultsHeader';\nimport { SearchResultsPresearch as DefaultSearchResultsPresearch } from './SearchResultsPresearch';\nimport { useSearchContext } from '../SearchContext';\nimport {\n  useAnnounceSearchResultCount,\n  useSearchResultsKeyboardNavigation,\n} from '../hooks';\nimport { useComponentContext, useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst searchControllerStateSelector = (nextValue: SearchControllerState) => ({\n  activeSources: nextValue.sources.filter((s) => s.isActive),\n  isActive: nextValue.isActive,\n  searchQuery: nextValue.searchQuery,\n});\n\nexport const SearchResults = () => {\n  const { t } = useTranslationContext();\n  const {\n    SearchResultsHeader = DefaultSearchResultsHeader,\n    SearchResultsPresearch = DefaultSearchResultsPresearch,\n    SearchSourceResults = DefaultSourceSearchResults,\n  } = useComponentContext();\n  const { searchController } = useSearchContext();\n  const { activeSources, isActive, searchQuery } = useStateStore(\n    searchController.state,\n    searchControllerStateSelector,\n  );\n\n  const resultsRef = useRef<HTMLDivElement | null>(null);\n  const { onKeyDown } = useSearchResultsKeyboardNavigation(resultsRef);\n  // Announce the number of listed results once the list settles (only while a query is in progress,\n  // not during presearch); the end-of-list status rides along in that same announcement.\n  useAnnounceSearchResultCount(resultsRef, isActive && !!searchQuery, activeSources);\n\n  return !isActive ? null : (\n    <div\n      aria-label={t('search.results.searchResults.ariaLabel', 'Search results')}\n      className='str-chat__search-results'\n      onKeyDown={onKeyDown}\n      ref={resultsRef}\n    >\n      <SearchResultsHeader />\n      {!searchQuery ? (\n        <SearchResultsPresearch activeSources={activeSources} />\n      ) : (\n        activeSources.map((source) => (\n          <SearchSourceResults key={source.type} searchSource={source} />\n        ))\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,iCAAiC,eAAsC;CAC3E,eAAe,UAAU,QAAQ,QAAQ,MAAM,EAAE,QAAQ;CACzD,UAAU,UAAU;CACpB,aAAa,UAAU;AACzB;AAEA,IAAa,sBAAsB;CACjC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,qBAAA,wBAAsB,qBACtB,wBAAA,2BAAyB,wBACzB,qBAAA,wBAAsB,wBACpB,oBAAoB;CACxB,MAAM,EAAE,qBAAqB,iBAAiB;CAC9C,MAAM,EAAE,eAAe,UAAU,gBAAgB,cAC/C,iBAAiB,OACjB,6BACF;CAEA,MAAM,aAAa,OAA8B,IAAI;CACrD,MAAM,EAAE,cAAc,mCAAmC,UAAU;CAGnE,6BAA6B,YAAY,YAAY,CAAC,CAAC,aAAa,aAAa;CAEjF,OAAO,CAAC,WAAW,OACjB,qBAAC,OAAD;EACE,cAAY,EAAE,0CAA0C,gBAAgB;EACxE,WAAU;EACC;EACX,KAAK;YAJP,CAME,oBAAC,uBAAD,CAAsB,CAAA,GACrB,CAAC,cACA,oBAAC,0BAAD,EAAuC,cAAgB,CAAA,IAEvD,cAAc,KAAK,WACjB,oBAAC,uBAAD,EAAuC,cAAc,OAAS,GAApC,OAAO,IAA6B,CAC/D,CAEA;;AAET"}

package/dist/es/components/Search/SearchResults/SearchResultsHeader.mjs

@@ -1,4 +1,5 @@
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { asDynamicKey } from "../../../i18n/utils.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { useSearchContext } from "../SearchContext.mjs";
@@ -13,13 +14,13 @@ var SearchSourceFilterButton = ({ source }) => {
 	const { isActive } = useStateStore(source.state, searchSourceStateSelector);
 	const label = `search-results-header-filter-source-button-label--${source.type}`;
 	const buttonContent = useMemo(() => ({
-		"search-results-header-filter-source-button-label--channels": t("search-results-header-filter-source-button-label--channels"),
-		"search-results-header-filter-source-button-label--messages": t("search-results-header-filter-source-button-label--messages"),
-		"search-results-header-filter-source-button-label--users": t("search-results-header-filter-source-button-label--users")
-	}), [t])[label] ?? t(label);
+		"search-results-header-filter-source-button-label--channels": t("search.resultsHeader.filterSource.channels", "channels"),
+		"search-results-header-filter-source-button-label--messages": t("search.resultsHeader.filterSource.messages", "messages"),
+		"search-results-header-filter-source-button-label--users": t("search.resultsHeader.filterSource.users", "users")
+	}), [t])[label] ?? t(asDynamicKey(label));
 	return /* @__PURE__ */ jsx(Button, {
 		appearance: "outline",
-		"aria-label": t("aria/Search results header filter button for: {{ source }}", { source: buttonContent }),
+		"aria-label": t("search.resultsHeader.ariaLabel", "Search results header filter button for: {{ source }}", { source: buttonContent }),
 		"aria-pressed": isActive,
 		className: clsx("str-chat__search-results-header__filter-source-button", { "str-chat__search-results-header__filter-source-button--active": isActive }),
 		onClick: () => {

package/dist/es/components/Search/SearchResults/SearchResultsHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultsHeader.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchResultsHeader.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useMemo } from 'react';\nimport type { SearchSource, SearchSourceState } from 'stream-chat';\n\nimport { useSearchContext } from '../SearchContext';\nimport { useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { Button } from '../../../components';\n\nconst searchSourceStateSelector = (nextValue: SearchSourceState) => ({\n  isActive: nextValue.isActive,\n});\n\ntype SearchSourceFilterButtonProps = {\n  source: SearchSource;\n};\n\nconst SearchSourceFilterButton = ({ source }: SearchSourceFilterButtonProps) => {\n  const { t } = useTranslationContext();\n  const { searchController } = useSearchContext();\n  const { isActive } = useStateStore(source.state, searchSourceStateSelector);\n  const label = `search-results-header-filter-source-button-label--${source.type}`;\n\n  const knownLabels = useMemo<Record<string, string>>(\n    () => ({\n      'search-results-header-filter-source-button-label--channels': t(\n        'search-results-header-filter-source-button-label--channels',\n      ),\n      'search-results-header-filter-source-button-label--messages': t(\n        'search-results-header-filter-source-button-label--messages',\n      ),\n      'search-results-header-filter-source-button-label--users': t(\n        'search-results-header-filter-source-button-label--users',\n      ),\n    }),\n    [t],\n  );\n\n  const buttonContent = knownLabels[label] ?? t(label);\n  return (\n    <Button\n      appearance='outline'\n      aria-label={t('aria/Search results header filter button for: {{ source }}', {\n        source: buttonContent,\n      })}\n      aria-pressed={isActive}\n      className={clsx('str-chat__search-results-header__filter-source-button', {\n        'str-chat__search-results-header__filter-source-button--active': isActive,\n      })}\n      key={label}\n      onClick={() => {\n        if (source.isActive) {\n          searchController.deactivateSource(source.type);\n        } else {\n          searchController.activateSource(source.type);\n          if (searchController.searchQuery && !source.items?.length)\n            source.search(searchController.searchQuery);\n        }\n      }}\n      size='xs'\n      variant='secondary'\n    >\n      {buttonContent}\n    </Button>\n  );\n};\n\nexport const SearchResultsHeader = () => {\n  const { filterButtonsContainerRef, searchController } = useSearchContext();\n\n  // render nothing if there's only one source (can't change filters)\n  if (searchController.sources.length < 2) return null;\n\n  return (\n    <div className='str-chat__search-results-header' data-testid='search-results-header'>\n      <div\n        className='str-chat__search-results-header__filter-source-buttons'\n        data-testid='filter-source-buttons'\n        ref={filterButtonsContainerRef}\n      >\n        {searchController.sources.map((source) => (\n          <SearchSourceFilterButton key={source.type} source={source} />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AASA,IAAM,6BAA6B,eAAkC,EACnE,UAAU,UAAU,SACtB;AAMA,IAAM,4BAA4B,EAAE,aAA4C;CAC9E,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,qBAAqB,iBAAiB;CAC9C,MAAM,EAAE,aAAa,cAAc,OAAO,OAAO,yBAAyB;CAC1E,MAAM,QAAQ,qDAAqD,OAAO;CAiB1E,MAAM,gBAfc,eACX;EACL,8DAA8D,EAC5D,4DACF;EACA,8DAA8D,EAC5D,4DACF;EACA,2DAA2D,EACzD,yDACF;CACF,IACA,CAAC,CAAC,CAGkB,CAAA,CAAY,UAAU,EAAE,KAAK;CACnD,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,8DAA8D,EAC1E,QAAQ,cACV,CAAC;EACD,gBAAc;EACd,WAAW,KAAK,yDAAyD,EACvE,iEAAiE,SACnE,CAAC;EAED,eAAe;GACb,IAAI,OAAO,UACT,iBAAiB,iBAAiB,OAAO,IAAI;QACxC;IACL,iBAAiB,eAAe,OAAO,IAAI;IAC3C,IAAI,iBAAiB,eAAe,CAAC,OAAO,OAAO,QACjD,OAAO,OAAO,iBAAiB,WAAW;GAC9C;EACF;EACA,MAAK;EACL,SAAQ;YAEP;CACK,GAdD,KAcC;AAEZ;AAEA,IAAa,4BAA4B;CACvC,MAAM,EAAE,2BAA2B,qBAAqB,iBAAiB;CAGzE,IAAI,iBAAiB,QAAQ,SAAS,GAAG,OAAO;CAEhD,OACE,oBAAC,OAAD;EAAK,WAAU;EAAkC,eAAY;YAC3D,oBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,KAAK;aAEJ,iBAAiB,QAAQ,KAAK,WAC7B,oBAAC,0BAAD,EAAoD,OAAS,GAA9B,OAAO,IAAuB,CAC9D;EACE,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"SearchResultsHeader.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchResultsHeader.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useMemo } from 'react';\nimport type { SearchSource, SearchSourceState } from 'stream-chat';\n\nimport { useSearchContext } from '../SearchContext';\nimport { useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { Button } from '../../../components';\nimport { asDynamicKey } from '../../../i18n/utils';\n\nconst searchSourceStateSelector = (nextValue: SearchSourceState) => ({\n  isActive: nextValue.isActive,\n});\n\ntype SearchSourceFilterButtonProps = {\n  source: SearchSource;\n};\n\nconst SearchSourceFilterButton = ({ source }: SearchSourceFilterButtonProps) => {\n  const { t } = useTranslationContext();\n  const { searchController } = useSearchContext();\n  const { isActive } = useStateStore(source.state, searchSourceStateSelector);\n  const label = `search-results-header-filter-source-button-label--${source.type}`;\n\n  const knownLabels = useMemo<Record<string, string>>(\n    () => ({\n      'search-results-header-filter-source-button-label--channels': t(\n        'search.resultsHeader.filterSource.channels',\n        'channels',\n      ),\n      'search-results-header-filter-source-button-label--messages': t(\n        'search.resultsHeader.filterSource.messages',\n        'messages',\n      ),\n      'search-results-header-filter-source-button-label--users': t(\n        'search.resultsHeader.filterSource.users',\n        'users',\n      ),\n    }),\n    [t],\n  );\n\n  const buttonContent = knownLabels[label] ?? t(asDynamicKey(label));\n  return (\n    <Button\n      appearance='outline'\n      aria-label={t(\n        'search.resultsHeader.ariaLabel',\n        'Search results header filter button for: {{ source }}',\n        {\n          source: buttonContent,\n        },\n      )}\n      aria-pressed={isActive}\n      className={clsx('str-chat__search-results-header__filter-source-button', {\n        'str-chat__search-results-header__filter-source-button--active': isActive,\n      })}\n      key={label}\n      onClick={() => {\n        if (source.isActive) {\n          searchController.deactivateSource(source.type);\n        } else {\n          searchController.activateSource(source.type);\n          if (searchController.searchQuery && !source.items?.length)\n            source.search(searchController.searchQuery);\n        }\n      }}\n      size='xs'\n      variant='secondary'\n    >\n      {buttonContent}\n    </Button>\n  );\n};\n\nexport const SearchResultsHeader = () => {\n  const { filterButtonsContainerRef, searchController } = useSearchContext();\n\n  // render nothing if there's only one source (can't change filters)\n  if (searchController.sources.length < 2) return null;\n\n  return (\n    <div className='str-chat__search-results-header' data-testid='search-results-header'>\n      <div\n        className='str-chat__search-results-header__filter-source-buttons'\n        data-testid='filter-source-buttons'\n        ref={filterButtonsContainerRef}\n      >\n        {searchController.sources.map((source) => (\n          <SearchSourceFilterButton key={source.type} source={source} />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAUA,IAAM,6BAA6B,eAAkC,EACnE,UAAU,UAAU,SACtB;AAMA,IAAM,4BAA4B,EAAE,aAA4C;CAC9E,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,qBAAqB,iBAAiB;CAC9C,MAAM,EAAE,aAAa,cAAc,OAAO,OAAO,yBAAyB;CAC1E,MAAM,QAAQ,qDAAqD,OAAO;CAoB1E,MAAM,gBAlBc,eACX;EACL,8DAA8D,EAC5D,8CACA,UACF;EACA,8DAA8D,EAC5D,8CACA,UACF;EACA,2DAA2D,EACzD,2CACA,OACF;CACF,IACA,CAAC,CAAC,CAGkB,CAAA,CAAY,UAAU,EAAE,aAAa,KAAK,CAAC;CACjE,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EACV,kCACA,yDACA,EACE,QAAQ,cACV,CACF;EACA,gBAAc;EACd,WAAW,KAAK,yDAAyD,EACvE,iEAAiE,SACnE,CAAC;EAED,eAAe;GACb,IAAI,OAAO,UACT,iBAAiB,iBAAiB,OAAO,IAAI;QACxC;IACL,iBAAiB,eAAe,OAAO,IAAI;IAC3C,IAAI,iBAAiB,eAAe,CAAC,OAAO,OAAO,QACjD,OAAO,OAAO,iBAAiB,WAAW;GAC9C;EACF;EACA,MAAK;EACL,SAAQ;YAEP;CACK,GAdD,KAcC;AAEZ;AAEA,IAAa,4BAA4B;CACvC,MAAM,EAAE,2BAA2B,qBAAqB,iBAAiB;CAGzE,IAAI,iBAAiB,QAAQ,SAAS,GAAG,OAAO;CAEhD,OACE,oBAAC,OAAD;EAAK,WAAU;EAAkC,eAAY;YAC3D,oBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,KAAK;aAEJ,iBAAiB,QAAQ,KAAK,WAC7B,oBAAC,0BAAD,EAAoD,OAAS,GAA9B,OAAO,IAAuB,CAC9D;EACE,CAAA;CACF,CAAA;AAET"}

package/dist/es/components/Search/SearchResults/SearchResultsPresearch.mjs

@@ -6,7 +6,7 @@ var SearchResultsPresearch = () => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx("div", {
 		className: "str-chat__search-results-presearch",
-		children: t("Start typing to search")
+		children: t("search.resultsPresearch.startTypingSearch.text", "Start typing to search")
 	});
 };
 //#endregion

package/dist/es/components/Search/SearchResults/SearchResultsPresearch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultsPresearch.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchResultsPresearch.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../../context';\n\nimport type { SearchSource } from 'stream-chat';\n\nexport type SearchResultsPresearchProps = {\n  activeSources: SearchSource[];\n};\n\nexport const SearchResultsPresearch = () => {\n  const { t } = useTranslationContext();\n  return (\n    <div className='str-chat__search-results-presearch'>\n      {t('Start typing to search')}\n    </div>\n  );\n};\n"],"mappings":";;;;AAUA,IAAa,+BAA+B;CAC1C,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,EAAE,wBAAwB;CACxB,CAAA;AAET"}
+{"version":3,"file":"SearchResultsPresearch.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchResultsPresearch.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../../context';\n\nimport type { SearchSource } from 'stream-chat';\n\nexport type SearchResultsPresearchProps = {\n  activeSources: SearchSource[];\n};\n\nexport const SearchResultsPresearch = () => {\n  const { t } = useTranslationContext();\n  return (\n    <div className='str-chat__search-results-presearch'>\n      {t('search.resultsPresearch.startTypingSearch.text', 'Start typing to search')}\n    </div>\n  );\n};\n"],"mappings":";;;;AAUA,IAAa,+BAA+B;CAC1C,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,EAAE,kDAAkD,wBAAwB;CAC1E,CAAA;AAET"}

package/dist/es/components/Search/SearchResults/SearchSourceResultList.mjs

@@ -1,5 +1,5 @@
-import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { InfiniteScrollPaginator } from "../../InfiniteScrollPaginator/InfiniteScrollPaginator.mjs";
 import { DefaultSearchResultItems } from "./SearchResultItem.mjs";
 import { useSearchSourceResultsContext } from "../SearchSourceResultsContext.mjs";

package/dist/es/components/Search/SearchResults/SearchSourceResultListFooter.mjs

@@ -1,5 +1,5 @@
-import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { useSearchSourceResultsContext } from "../SearchSourceResultsContext.mjs";
 import { SearchSourceResultsLoadingIndicator } from "./SearchSourceResultsLoadingIndicator.mjs";
@@ -21,7 +21,7 @@ var SearchSourceResultListFooter = () => {
 		children: isLoading ? /* @__PURE__ */ jsx(SearchSourceResultsLoadingIndicator$1, {}) : !hasNext ? /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
 			className: "str-chat__search-source-results---empty",
-			children: t("All results loaded")
+			children: t("common.resultsLoaded.label", "All results loaded")
 		}) : null
 	});
 };

package/dist/es/components/Search/SearchResults/SearchSourceResultListFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchSourceResultListFooter.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchSourceResultListFooter.tsx"],"sourcesContent":["import React from 'react';\nimport type { SearchSourceState } from 'stream-chat';\n\nimport { SearchSourceResultsLoadingIndicator as DefaultSearchSourceResultsLoadingIndicator } from './SearchSourceResultsLoadingIndicator';\nimport { useSearchSourceResultsContext } from '../SearchSourceResultsContext';\nimport { useComponentContext, useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst searchSourceStateSelector = (value: SearchSourceState) => ({\n  hasNext: value.hasNext,\n  isLoading: value.isLoading,\n});\n\nexport const SearchSourceResultListFooter = () => {\n  const { t } = useTranslationContext();\n  const {\n    SearchSourceResultsLoadingIndicator = DefaultSearchSourceResultsLoadingIndicator,\n  } = useComponentContext();\n  const { searchSource } = useSearchSourceResultsContext();\n  const { hasNext, isLoading } = useStateStore(\n    searchSource.state,\n    searchSourceStateSelector,\n  );\n\n  // The \"all results loaded\" end-of-list status is announced (combined with the result count) by\n  // `useAnnounceSearchResultCount`; here it is visual only.\n  return (\n    <div\n      className='str-chat__search-source-result-list__footer'\n      data-testid='search-footer'\n    >\n      {isLoading ? (\n        <SearchSourceResultsLoadingIndicator />\n      ) : !hasNext ? (\n        // Hidden from assistive tech: the end-of-list status is announced (combined with the result\n        // count) by `useAnnounceSearchResultCount`, so the text is not read as a navigable result.\n        <div aria-hidden='true' className='str-chat__search-source-results---empty'>\n          {t('All results loaded')}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAM,6BAA6B,WAA8B;CAC/D,SAAS,MAAM;CACf,WAAW,MAAM;AACnB;AAEA,IAAa,qCAAqC;CAChD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,qCAAA,wCAAsC,wCACpC,oBAAoB;CACxB,MAAM,EAAE,iBAAiB,8BAA8B;CACvD,MAAM,EAAE,SAAS,cAAc,cAC7B,aAAa,OACb,yBACF;CAIA,OACE,oBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEX,YACC,oBAAC,uCAAD,CAAsC,CAAA,IACpC,CAAC,UAGH,oBAAC,OAAD;GAAK,eAAY;GAAO,WAAU;aAC/B,EAAE,oBAAoB;EACpB,CAAA,IACH;CACD,CAAA;AAET"}
+{"version":3,"file":"SearchSourceResultListFooter.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchSourceResultListFooter.tsx"],"sourcesContent":["import React from 'react';\nimport type { SearchSourceState } from 'stream-chat';\n\nimport { SearchSourceResultsLoadingIndicator as DefaultSearchSourceResultsLoadingIndicator } from './SearchSourceResultsLoadingIndicator';\nimport { useSearchSourceResultsContext } from '../SearchSourceResultsContext';\nimport { useComponentContext, useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst searchSourceStateSelector = (value: SearchSourceState) => ({\n  hasNext: value.hasNext,\n  isLoading: value.isLoading,\n});\n\nexport const SearchSourceResultListFooter = () => {\n  const { t } = useTranslationContext();\n  const {\n    SearchSourceResultsLoadingIndicator = DefaultSearchSourceResultsLoadingIndicator,\n  } = useComponentContext();\n  const { searchSource } = useSearchSourceResultsContext();\n  const { hasNext, isLoading } = useStateStore(\n    searchSource.state,\n    searchSourceStateSelector,\n  );\n\n  // The \"all results loaded\" end-of-list status is announced (combined with the result count) by\n  // `useAnnounceSearchResultCount`; here it is visual only.\n  return (\n    <div\n      className='str-chat__search-source-result-list__footer'\n      data-testid='search-footer'\n    >\n      {isLoading ? (\n        <SearchSourceResultsLoadingIndicator />\n      ) : !hasNext ? (\n        // Hidden from assistive tech: the end-of-list status is announced (combined with the result\n        // count) by `useAnnounceSearchResultCount`, so the text is not read as a navigable result.\n        <div aria-hidden='true' className='str-chat__search-source-results---empty'>\n          {t('common.resultsLoaded.label', 'All results loaded')}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAM,6BAA6B,WAA8B;CAC/D,SAAS,MAAM;CACf,WAAW,MAAM;AACnB;AAEA,IAAa,qCAAqC;CAChD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,qCAAA,wCAAsC,wCACpC,oBAAoB;CACxB,MAAM,EAAE,iBAAiB,8BAA8B;CACvD,MAAM,EAAE,SAAS,cAAc,cAC7B,aAAa,OACb,yBACF;CAIA,OACE,oBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEX,YACC,oBAAC,uCAAD,CAAsC,CAAA,IACpC,CAAC,UAGH,oBAAC,OAAD;GAAK,eAAY;GAAO,WAAU;aAC/B,EAAE,8BAA8B,oBAAoB;EAClD,CAAA,IACH;CACD,CAAA;AAET"}

package/dist/es/components/Search/SearchResults/SearchSourceResults.mjs

@@ -1,5 +1,5 @@
-import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { SearchSourceResultsContextProvider } from "../SearchSourceResultsContext.mjs";
 import { SearchSourceResultList } from "./SearchSourceResultList.mjs";
 import { SearchSourceResultsEmpty } from "./SearchSourceResultsEmpty.mjs";

package/dist/es/components/Search/SearchResults/SearchSourceResultsEmpty.mjs

@@ -6,7 +6,7 @@ var SearchSourceResultsEmpty = () => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx("div", {
 		className: "str-chat__search-source-results-empty",
-		children: t("No results found")
+		children: t("search.sourceResults.noResultsFound.text", "No results found")
 	});
 };
 //#endregion

package/dist/es/components/Search/SearchResults/SearchSourceResultsEmpty.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchSourceResultsEmpty.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchSourceResultsEmpty.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslationContext } from '../../../context';\n\nexport const SearchSourceResultsEmpty = () => {\n  const { t } = useTranslationContext();\n  return (\n    <div className='str-chat__search-source-results-empty'>{t('No results found')}</div>\n  );\n};\n"],"mappings":";;;;AAGA,IAAa,iCAAiC;CAC5C,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,OAAD;EAAK,WAAU;YAAyC,EAAE,kBAAkB;CAAO,CAAA;AAEvF"}
+{"version":3,"file":"SearchSourceResultsEmpty.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchSourceResultsEmpty.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslationContext } from '../../../context';\n\nexport const SearchSourceResultsEmpty = () => {\n  const { t } = useTranslationContext();\n  return (\n    <div className='str-chat__search-source-results-empty'>\n      {t('search.sourceResults.noResultsFound.text', 'No results found')}\n    </div>\n  );\n};\n"],"mappings":";;;;AAGA,IAAa,iCAAiC;CAC5C,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,EAAE,4CAA4C,kBAAkB;CAC9D,CAAA;AAET"}

package/dist/es/components/Search/SearchResults/SearchSourceResultsLoadingIndicator.mjs

@@ -9,7 +9,7 @@ var SearchSourceResultsLoadingIndicator = () => {
 	return /* @__PURE__ */ jsx("div", {
 		className: "str-chat__search-source-results__loading-indicator",
 		"data-testid": "search-loading-indicator",
-		children: t("Searching for {{ searchSourceType }}...", { searchSourceType: searchSource.type })
+		children: t("search.sourceResults.searching.text", "Searching for {{ searchSourceType }}...", { searchSourceType: searchSource.type })
 	});
 };
 //#endregion