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

package/dist/es/components/Reactions/SpriteImage.mjs

@@ -0,0 +1,34 @@
+import { getImageDimensions } from "./utils/utils.mjs";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/Reactions/SpriteImage.tsx
+var SpriteImage = ({ columns, fallback, height, position, rows, spriteUrl, style, width }) => {
+	const [[spriteWidth, spriteHeight], setSpriteDimensions] = useState([0, 0]);
+	useEffect(() => {
+		getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
+	}, [spriteUrl]);
+	const [x, y] = position;
+	if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": "sprite-image",
+		style: {
+			...style,
+			"--str-chat__sprite-image-resize-ratio": "var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))",
+			"--str-chat__sprite-image-resize-ratio-x": "calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))",
+			"--str-chat__sprite-image-resize-ratio-y": "calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))",
+			"--str-chat__sprite-item-height": `${spriteHeight / rows}`,
+			"--str-chat__sprite-item-width": `${spriteWidth / columns}`,
+			...Number.isFinite(height) ? { "--str-chat__sprite-image-height": `${height}px` } : {},
+			...Number.isFinite(width) ? { "--str-chat__sprite-image-width": `${width}px` } : {},
+			backgroundImage: `url('${spriteUrl}')`,
+			backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
+			backgroundSize: `${columns * 100}% ${rows * 100}%`,
+			height: "var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))",
+			width: "var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))"
+		}
+	});
+};
+//#endregion
+export { SpriteImage };
+
+//# sourceMappingURL=SpriteImage.mjs.map

package/dist/es/components/Reactions/SpriteImage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpriteImage.mjs","names":[],"sources":["../../../../src/components/Reactions/SpriteImage.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { getImageDimensions } from './utils/utils';\n\nexport type SpriteImageProps = {\n  columns: number;\n  position: [number, number];\n  rows: number;\n  spriteUrl: string;\n  fallback?: React.ReactNode;\n  height?: number;\n  style?: React.CSSProperties;\n  width?: number;\n};\n\nexport const SpriteImage = ({\n  columns,\n  fallback,\n  height,\n  position,\n  rows,\n  spriteUrl,\n  style,\n  width,\n}: SpriteImageProps) => {\n  const [[spriteWidth, spriteHeight], setSpriteDimensions] = useState([0, 0]);\n\n  useEffect(() => {\n    getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);\n  }, [spriteUrl]);\n\n  const [x, y] = position;\n\n  if (!spriteHeight || !spriteWidth) return <>{fallback}</>;\n\n  return (\n    <div\n      data-testid='sprite-image'\n      style={\n        {\n          ...style,\n          '--str-chat__sprite-image-resize-ratio':\n            'var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))',\n          '--str-chat__sprite-image-resize-ratio-x':\n            'calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))',\n          '--str-chat__sprite-image-resize-ratio-y':\n            'calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))',\n          '--str-chat__sprite-item-height': `${spriteHeight / rows}`,\n          '--str-chat__sprite-item-width': `${spriteWidth / columns}`,\n          ...(Number.isFinite(height)\n            ? { '--str-chat__sprite-image-height': `${height}px` }\n            : {}),\n          ...(Number.isFinite(width)\n            ? { '--str-chat__sprite-image-width': `${width}px` }\n            : {}),\n          backgroundImage: `url('${spriteUrl}')`,\n          backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,\n          backgroundSize: `${columns * 100}% ${rows * 100}%`,\n          height:\n            'var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))',\n          width:\n            'var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))',\n        } as React.CSSProperties\n      }\n    />\n  );\n};\n"],"mappings":";;;;AAeA,IAAa,eAAe,EAC1B,SACA,UACA,QACA,UACA,MACA,WACA,OACA,YACsB;CACtB,MAAM,CAAC,CAAC,aAAa,eAAe,uBAAuB,SAAS,CAAC,GAAG,CAAC,CAAC;CAE1E,gBAAgB;EACd,mBAAmB,SAAS,CAAC,CAAC,KAAK,mBAAmB,CAAC,CAAC,MAAM,QAAQ,KAAK;CAC7E,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,CAAC,GAAG,KAAK;CAEf,IAAI,CAAC,gBAAgB,CAAC,aAAa,OAAO,oBAAA,YAAA,EAAA,UAAG,SAAW,CAAA;CAExD,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,OACE;GACE,GAAG;GACH,yCACE;GACF,2CACE;GACF,2CACE;GACF,kCAAkC,GAAG,eAAe;GACpD,iCAAiC,GAAG,cAAc;GAClD,GAAI,OAAO,SAAS,MAAM,IACtB,EAAE,mCAAmC,GAAG,OAAO,IAAI,IACnD,CAAC;GACL,GAAI,OAAO,SAAS,KAAK,IACrB,EAAE,kCAAkC,GAAG,MAAM,IAAI,IACjD,CAAC;GACL,iBAAiB,QAAQ,UAAU;GACnC,oBAAoB,GAAG,KAAK,OAAO,UAAU,IAAI,IAAI,KAAK,OAAO,OAAO,IAAI;GAC5E,gBAAgB,GAAG,UAAU,IAAI,IAAI,OAAO,IAAI;GAChD,QACE;GACF,OACE;EACJ;CAEH,CAAA;AAEL"}

package/dist/es/components/Reactions/hooks/useFetchReactions.mjs

@@ -0,0 +1,61 @@
+import { useMessageContext } from "../../../context/MessageContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.mjs";
+import { useCallback, useEffect, useState } from "react";
+//#region src/components/Reactions/hooks/useFetchReactions.ts
+function useFetchReactions(options) {
+	const { addNotification } = useNotificationApi();
+	const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext();
+	const { t } = useTranslationContext();
+	const [reactions, setReactions] = useState([]);
+	const { handleFetchReactions: propHandleFetchReactions, reactionType, shouldFetch, sort } = options;
+	const [isLoading, setIsLoading] = useState(shouldFetch);
+	const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
+	const [refetchNonce, setRefetchNonce] = useState(null);
+	useEffect(() => {
+		if (!shouldFetch) return;
+		let cancel = false;
+		(async () => {
+			try {
+				setIsLoading(true);
+				const reactions = await handleFetchReactions(reactionType ?? void 0, sort);
+				if (!cancel) setReactions(reactions);
+			} catch (e) {
+				if (!cancel) {
+					setReactions([]);
+					addNotification({
+						emitter: "Reactions",
+						error: e instanceof Error ? e : void 0,
+						message: t("reactions.fetchReactions.errorFetchingReactions.text", "Error loading reactions"),
+						severity: "error",
+						type: "api:message:reactions:fetch:failed"
+					});
+				}
+			} finally {
+				if (!cancel) setIsLoading(false);
+			}
+		})();
+		return () => {
+			cancel = true;
+		};
+	}, [
+		addNotification,
+		handleFetchReactions,
+		reactionType,
+		refetchNonce,
+		shouldFetch,
+		sort,
+		t
+	]);
+	return {
+		isLoading,
+		reactions,
+		refetch: useCallback(() => {
+			setRefetchNonce(Math.random());
+		}, [])
+	};
+}
+//#endregion
+export { useFetchReactions };
+
+//# sourceMappingURL=useFetchReactions.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchReactions.mjs","names":[],"sources":["../../../../../src/components/Reactions/hooks/useFetchReactions.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { ReactionResponse, SortParamRequest } from 'stream-chat';\nimport type { MessageContextValue } from '../../../context';\nimport { useMessageContext, useTranslationContext } from '../../../context';\nimport { useNotificationApi } from '../../Notifications';\n\nimport type { ReactionType } from '../types';\n\nexport interface FetchReactionsOptions {\n  reactionType: ReactionType | null;\n  shouldFetch: boolean;\n  handleFetchReactions?: MessageContextValue['handleFetchReactions'];\n  sort?: SortParamRequest[];\n}\n\nexport function useFetchReactions(options: FetchReactionsOptions) {\n  const { addNotification } = useNotificationApi();\n  const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext();\n  const { t } = useTranslationContext();\n  const [reactions, setReactions] = useState<ReactionResponse[]>([]);\n  const {\n    handleFetchReactions: propHandleFetchReactions,\n    reactionType,\n    shouldFetch,\n    sort,\n  } = options;\n  const [isLoading, setIsLoading] = useState(shouldFetch);\n  const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;\n  const [refetchNonce, setRefetchNonce] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (!shouldFetch) {\n      return;\n    }\n\n    let cancel = false;\n\n    (async () => {\n      try {\n        setIsLoading(true);\n        const reactions = await handleFetchReactions(reactionType ?? undefined, sort);\n\n        if (!cancel) {\n          setReactions(reactions);\n        }\n      } catch (e) {\n        if (!cancel) {\n          setReactions([]);\n          addNotification({\n            emitter: 'Reactions',\n            error: e instanceof Error ? e : undefined,\n            message: t(\n              'reactions.fetchReactions.errorFetchingReactions.text',\n              'Error loading reactions',\n            ),\n            severity: 'error',\n            type: 'api:message:reactions:fetch:failed',\n          });\n        }\n      } finally {\n        if (!cancel) {\n          setIsLoading(false);\n        }\n      }\n    })();\n\n    return () => {\n      cancel = true;\n    };\n  }, [\n    addNotification,\n    handleFetchReactions,\n    reactionType,\n    refetchNonce,\n    shouldFetch,\n    sort,\n    t,\n  ]);\n\n  const refetch = useCallback(() => {\n    setRefetchNonce(Math.random());\n  }, []);\n\n  return { isLoading, reactions, refetch };\n}\n"],"mappings":";;;;;AAeA,SAAgB,kBAAkB,SAAgC;CAChE,MAAM,EAAE,oBAAoB,mBAAmB;CAC/C,MAAM,EAAE,sBAAsB,gCAAgC,kBAAkB;CAChF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,CAAC,WAAW,gBAAgB,SAA6B,CAAC,CAAC;CACjE,MAAM,EACJ,sBAAsB,0BACtB,cACA,aACA,SACE;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,WAAW;CACtD,MAAM,uBAAuB,4BAA4B;CACzD,MAAM,CAAC,cAAc,mBAAmB,SAAwB,IAAI;CAEpE,gBAAgB;EACd,IAAI,CAAC,aACH;EAGF,IAAI,SAAS;EAEb,CAAC,YAAY;GACX,IAAI;IACF,aAAa,IAAI;IACjB,MAAM,YAAY,MAAM,qBAAqB,gBAAgB,KAAA,GAAW,IAAI;IAE5E,IAAI,CAAC,QACH,aAAa,SAAS;GAE1B,SAAS,GAAG;IACV,IAAI,CAAC,QAAQ;KACX,aAAa,CAAC,CAAC;KACf,gBAAgB;MACd,SAAS;MACT,OAAO,aAAa,QAAQ,IAAI,KAAA;MAChC,SAAS,EACP,wDACA,yBACF;MACA,UAAU;MACV,MAAM;KACR,CAAC;IACH;GACF,UAAU;IACR,IAAI,CAAC,QACH,aAAa,KAAK;GAEtB;EACF,EAAA,CAAG;EAEH,aAAa;GACX,SAAS;EACX;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAMD,OAAO;EAAE;EAAW;EAAW,SAJf,kBAAkB;GAChC,gBAAgB,KAAK,OAAO,CAAC;EAC/B,GAAG,CAAC,CAE2B;CAAQ;AACzC"}

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

@@ -0,0 +1,83 @@
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useMessageContext } from "../../../context/MessageContext.mjs";
+import { defaultReactionOptions } from "../reactionOptions.mjs";
+import { useCallback, useMemo } from "react";
+import { nsToDate } from "stream-chat";
+//#region src/components/Reactions/hooks/useProcessReactions.tsx
+var defaultReactionsSort = (a, b) => {
+	if (a.firstReactionAt && b.firstReactionAt) return +a.firstReactionAt - +b.firstReactionAt;
+	return a.reactionType.localeCompare(b.reactionType, "en");
+};
+var useProcessReactions = (params) => {
+	const { own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactions: propReactions, sortReactions: propSortReactions } = params;
+	const { message, sortReactions: contextSortReactions } = useMessageContext();
+	const { reactionOptions = defaultReactionOptions } = useComponentContext();
+	const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
+	const latestReactions = propReactions ?? message.latest_reactions;
+	const ownReactions = propOwnReactions ?? message?.own_reactions;
+	const reactionGroups = propReactionGroups ?? message?.reaction_groups ?? void 0;
+	const isOwnReaction = useCallback((reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false, [ownReactions]);
+	const getEmojiByReactionType = useCallback((reactionType) => {
+		if (Array.isArray(reactionOptions)) return reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null;
+		return reactionOptions.quick[reactionType]?.Component ?? reactionOptions.extended?.[reactionType]?.Component ?? null;
+	}, [reactionOptions]);
+	const isSupportedReaction = useCallback((reactionType) => {
+		if (Array.isArray(reactionOptions)) return reactionOptions.some((reactionOption) => reactionOption.type === reactionType);
+		return typeof reactionOptions.quick[reactionType] !== "undefined" || typeof reactionOptions.extended?.[reactionType] !== "undefined";
+	}, [reactionOptions]);
+	/**
+	* Amount of unique reaction types ("haha", "like", etc.) on a message.
+	*/
+	const uniqueReactionTypeCount = useMemo(() => {
+		if (!reactionGroups) return 0;
+		return Object.keys(reactionGroups).filter((reactionType) => isSupportedReaction(reactionType)).length;
+	}, [isSupportedReaction, reactionGroups]);
+	const latestReactedUserNamesByType = useMemo(() => {
+		const namesByType = /* @__PURE__ */ new Map();
+		if (!latestReactions) return namesByType;
+		for (const reaction of latestReactions) {
+			if (!reaction.type) continue;
+			const username = reaction.user?.name || reaction.user?.id;
+			if (!username) continue;
+			const existing = namesByType.get(reaction.type);
+			if (existing) existing.push(username);
+			else namesByType.set(reaction.type, [username]);
+		}
+		return namesByType;
+	}, [latestReactions]);
+	const existingReactions = useMemo(() => {
+		if (!reactionGroups) return [];
+		return Object.entries(reactionGroups).flatMap(([reactionType, { count, first_reaction_at, last_reaction_at }]) => {
+			if (count === 0 || !isSupportedReaction(reactionType)) return [];
+			const latestReactedUserNames = latestReactedUserNamesByType.get(reactionType) ?? [];
+			return [{
+				EmojiComponent: getEmojiByReactionType(reactionType),
+				firstReactionAt: first_reaction_at != null ? nsToDate(first_reaction_at) : null,
+				isOwnReaction: isOwnReaction(reactionType),
+				lastReactionAt: last_reaction_at != null ? nsToDate(last_reaction_at) : null,
+				latestReactedUserNames,
+				reactionCount: count,
+				reactionType,
+				unlistedReactedUserCount: count - latestReactedUserNames.length
+			}];
+		}).sort(sortReactions);
+	}, [
+		getEmojiByReactionType,
+		latestReactedUserNamesByType,
+		isOwnReaction,
+		isSupportedReaction,
+		reactionGroups,
+		sortReactions
+	]);
+	return {
+		existingReactions,
+		hasReactions: existingReactions.length > 0,
+		reactionGroups,
+		totalReactionCount: useMemo(() => Object.values(reactionGroups ?? {}).reduce((total, { count }) => total + count, 0), [reactionGroups]),
+		uniqueReactionTypeCount
+	};
+};
+//#endregion
+export { defaultReactionsSort, useProcessReactions };
+
+//# sourceMappingURL=useProcessReactions.mjs.map

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

@@ -0,0 +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';\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":";;;;;;AAgBA,IAAa,wBAA6C,GAAG,MAAM;CACjE,IAAI,EAAE,mBAAmB,EAAE,iBACzB,OAAO,CAAC,EAAE,kBAAkB,CAAC,EAAE;CAGjC,OAAO,EAAE,aAAa,cAAc,EAAE,cAAc,IAAI;AAC1D;AAEA,IAAa,uBAAuB,WAAsC;CACxE,MAAM,EACJ,eAAe,kBACf,iBAAiB,oBACjB,WAAW,eACX,eAAe,sBACb;CACJ,MAAM,EAAE,SAAS,eAAe,yBAAyB,kBAAkB;CAC3E,MAAM,EAAE,kBAAkB,2BAA2B,oBAAoB;CAEzE,MAAM,gBAAgB,qBAAqB,wBAAwB;CACnE,MAAM,kBAAkB,iBAAiB,QAAQ;CACjD,MAAM,eAAe,oBAAoB,SAAS;CAClD,MAAM,iBAAiB,sBAAsB,SAAS,mBAAmB,KAAA;CAEzE,MAAM,gBAAgB,aACnB,iBACC,cAAc,MAAM,aAAa,SAAS,SAAS,YAAY,KAAK,OACtE,CAAC,YAAY,CACf;CAEA,MAAM,yBAAyB,aAC5B,iBAAyB;EACxB,IAAI,MAAM,QAAQ,eAAe,GAC/B,OACE,gBAAgB,MAAM,EAAE,WAAW,SAAS,YAAY,CAAC,EAAE,aAAa;EAI5E,OACE,gBAAgB,MAAM,aAAa,EAAE,aACrC,gBAAgB,WAAW,aAAa,EAAE,aAC1C;CAEJ,GACA,CAAC,eAAe,CAClB;CAEA,MAAM,sBAAsB,aACzB,iBAAyB;EACxB,IAAI,MAAM,QAAQ,eAAe,GAC/B,OAAO,gBAAgB,MACpB,mBAAmB,eAAe,SAAS,YAC9C;EAGF,OACE,OAAO,gBAAgB,MAAM,kBAAkB,eAC/C,OAAO,gBAAgB,WAAW,kBAAkB;CAExD,GACA,CAAC,eAAe,CAClB;;;;CAKA,MAAM,0BAA0B,cAAc;EAC5C,IAAI,CAAC,gBACH,OAAO;EAGT,OAAO,OAAO,KAAK,cAAc,CAAC,CAAC,QAAQ,iBACzC,oBAAoB,YAAY,CAClC,CAAC,CAAC;CACJ,GAAG,CAAC,qBAAqB,cAAc,CAAC;CAKxC,MAAM,+BAA+B,cAAc;EACjD,MAAM,8BAAc,IAAI,IAAsB;EAC9C,IAAI,CAAC,iBAAiB,OAAO;EAE7B,KAAK,MAAM,YAAY,iBAAiB;GACtC,IAAI,CAAC,SAAS,MAAM;GACpB,MAAM,WAAW,SAAS,MAAM,QAAQ,SAAS,MAAM;GACvD,IAAI,CAAC,UAAU;GAEf,MAAM,WAAW,YAAY,IAAI,SAAS,IAAI;GAC9C,IAAI,UACF,SAAS,KAAK,QAAQ;QAEtB,YAAY,IAAI,SAAS,MAAM,CAAC,QAAQ,CAAC;EAE7C;EAEA,OAAO;CACT,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,oBAAuC,cAAc;EACzD,IAAI,CAAC,gBACH,OAAO,CAAC;EA4BV,OAzB0B,OAAO,QAAQ,cAAc,CAAC,CAAC,SACtD,CAAC,cAAc,EAAE,OAAO,mBAAmB,wBAAwB;GAClE,IAAI,UAAU,KAAK,CAAC,oBAAoB,YAAY,GAClD,OAAO,CAAC;GAGV,MAAM,yBACJ,6BAA6B,IAAI,YAAY,KAAK,CAAC;GAErD,OAAO,CACL;IACE,gBAAgB,uBAAuB,YAAY;IACnD,iBACE,qBAAqB,OAAO,SAAS,iBAAiB,IAAI;IAC5D,eAAe,cAAc,YAAY;IACzC,gBAAgB,oBAAoB,OAAO,SAAS,gBAAgB,IAAI;IACxE;IACA,eAAe;IACf;IACA,0BAA0B,QAAQ,uBAAuB;GAC3D,CACF;EACF,CAGK,CAAA,CAAkB,KAAK,aAAa;CAC7C,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAWD,OAAO;EACL;EACA,cAXmB,kBAAkB,SAAS;EAY9C;EACA,oBAXyB,cAEvB,OAAO,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,QAAQ,OAAO,EAAE,YAAY,QAAQ,OAAO,CAAC,GAEnF,CAAC,cAAc,CAOf;EACA;CACF;AACF"}

package/dist/es/components/Reactions/reactionOptions.mjs

@@ -0,0 +1,79 @@
+import "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/Reactions/reactionOptions.tsx
+var mapEmojiMartData = (emojiMartData) => {
+	if (!emojiMartData || !emojiMartData.emojis) return {};
+	const newMap = {};
+	for (const emojiId in emojiMartData.emojis) {
+		const emojiData = emojiMartData.emojis[emojiId];
+		const [firstEmoji] = emojiData.skins;
+		if (!firstEmoji || !firstEmoji.native) continue;
+		const nativeEmoji = firstEmoji.native;
+		const unicode = emojiToUnicode(nativeEmoji);
+		newMap[unicode] = {
+			Component: () => /* @__PURE__ */ jsx(Fragment$1, { children: nativeEmoji }),
+			name: emojiData.name,
+			unicode
+		};
+	}
+	return newMap;
+};
+var emojiToUnicode = (emoji) => {
+	const unicodeStrings = [];
+	for (const c of emoji) {
+		const codePoint = c.codePointAt(0);
+		unicodeStrings.push(`U+${codePoint.toString(16).toUpperCase().padStart(4, "0")}`);
+	}
+	return unicodeStrings.join("-");
+};
+var unicodeToEmoji = (unicode) => unicode.split("-").map((code) => String.fromCodePoint(parseInt(code.replace("U+", ""), 16))).join("");
+var defaultReactionOptions = { quick: {
+	haha: {
+		Component: () => /* @__PURE__ */ jsx(Fragment$1, { children: "😂" }),
+		name: "Joy",
+		unicode: emojiToUnicode("😂")
+	},
+	like: {
+		Component: () => /* @__PURE__ */ jsx(Fragment$1, { children: "👍" }),
+		name: "Thumbs up",
+		unicode: emojiToUnicode("👍")
+	},
+	love: {
+		Component: () => /* @__PURE__ */ jsx(Fragment$1, { children: "❤️" }),
+		name: "Heart",
+		unicode: emojiToUnicode("❤️")
+	},
+	sad: {
+		Component: () => /* @__PURE__ */ jsx(Fragment$1, { children: "😔" }),
+		name: "Sad",
+		unicode: emojiToUnicode("😔")
+	},
+	wow: {
+		Component: () => /* @__PURE__ */ jsx(Fragment$1, { children: "😮" }),
+		name: "Astonished",
+		unicode: emojiToUnicode("😮")
+	},
+	fire: {
+		Component: () => /* @__PURE__ */ jsx(Fragment$1, { children: "🔥" }),
+		name: "Fire",
+		unicode: emojiToUnicode("🔥")
+	}
+} };
+var getHasExtendedReactions = (reactionOptions) => !Array.isArray(reactionOptions) && typeof reactionOptions.extended !== "undefined" && Object.keys(reactionOptions.extended).length > 0;
+/**
+* Resolves the native emoji character (e.g. "👍") for a given reaction type from
+* the configured reaction options. The value is used as the `emoji_code` sent
+* with a reaction so that push notifications can render the emoji.
+*
+* Returns `undefined` when no `unicode` is available for the type (e.g. legacy
+* array reaction options or custom options that omit `unicode`).
+*/
+var getEmojiCodeByReactionType = (reactionOptions, reactionType) => {
+	if (Array.isArray(reactionOptions)) return void 0;
+	const unicode = reactionOptions.quick[reactionType]?.unicode ?? reactionOptions.extended?.[reactionType]?.unicode;
+	return unicode ? unicodeToEmoji(unicode) : void 0;
+};
+//#endregion
+export { defaultReactionOptions, emojiToUnicode, getEmojiCodeByReactionType, getHasExtendedReactions, mapEmojiMartData, unicodeToEmoji };
+
+//# sourceMappingURL=reactionOptions.mjs.map

package/dist/es/components/Reactions/reactionOptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactionOptions.mjs","names":[],"sources":["../../../../src/components/Reactions/reactionOptions.tsx"],"sourcesContent":["/* eslint-disable sort-keys */\n\nimport React from 'react';\n\ntype LegacyReactionOptions = Array<{\n  Component: React.ComponentType;\n  type: string;\n  name?: string;\n}>;\n\ntype ReactionOptionData = {\n  Component: React.ComponentType;\n  name?: string;\n  unicode?: string;\n};\n\nexport type ReactionOptions =\n  | LegacyReactionOptions\n  | {\n      quick: {\n        [key: string]: ReactionOptionData;\n      };\n      extended?: {\n        [key: string]: ReactionOptionData;\n      };\n    };\n\nexport const mapEmojiMartData = (\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  emojiMartData: any,\n): NonNullable<Exclude<ReactionOptions, LegacyReactionOptions>['extended']> => {\n  if (!emojiMartData || !emojiMartData.emojis) {\n    return {};\n  }\n\n  const newMap: ReturnType<typeof mapEmojiMartData> = {};\n\n  for (const emojiId in emojiMartData.emojis) {\n    const emojiData = emojiMartData.emojis[emojiId];\n    const [firstEmoji] = emojiData.skins;\n\n    if (!firstEmoji || !firstEmoji.native) continue;\n\n    const nativeEmoji = firstEmoji.native as string;\n\n    const unicode = emojiToUnicode(nativeEmoji);\n\n    newMap[unicode] = {\n      Component: () => <>{nativeEmoji}</>,\n      name: emojiData.name,\n      unicode,\n    };\n  }\n\n  return newMap;\n};\n\nexport type AdvancedReactionOptions = {\n  quick: ReactionOptions;\n  extended: ReactionOptions;\n};\n\nexport const emojiToUnicode = (emoji: string) => {\n  const unicodeStrings = [];\n  for (const c of emoji) {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const codePoint = c.codePointAt(0)!;\n    unicodeStrings.push(`U+${codePoint.toString(16).toUpperCase().padStart(4, '0')}`);\n  }\n\n  return unicodeStrings.join('-');\n};\n\nexport const unicodeToEmoji = (unicode: string) =>\n  unicode\n    .split('-')\n    .map((code) => String.fromCodePoint(parseInt(code.replace('U+', ''), 16)))\n    .join('');\n\nexport const defaultReactionOptions: ReactionOptions = {\n  quick: {\n    haha: {\n      Component: () => <>😂</>,\n      name: 'Joy',\n      unicode: emojiToUnicode('😂'),\n    },\n    like: {\n      Component: () => <>👍</>,\n      name: 'Thumbs up',\n      unicode: emojiToUnicode('👍'),\n    },\n    love: {\n      Component: () => <>❤️</>,\n      name: 'Heart',\n      unicode: emojiToUnicode('❤️'),\n    },\n    sad: { Component: () => <>😔</>, name: 'Sad', unicode: emojiToUnicode('😔') },\n    wow: {\n      Component: () => <>😮</>,\n      name: 'Astonished',\n      unicode: emojiToUnicode('😮'),\n    },\n    fire: {\n      Component: () => <>🔥</>,\n      name: 'Fire',\n      unicode: emojiToUnicode('🔥'),\n    },\n  },\n};\n\nexport const getHasExtendedReactions = (reactionOptions: ReactionOptions) =>\n  !Array.isArray(reactionOptions) &&\n  typeof reactionOptions.extended !== 'undefined' &&\n  Object.keys(reactionOptions.extended).length > 0;\n\n/**\n * Resolves the native emoji character (e.g. \"👍\") for a given reaction type from\n * the configured reaction options. The value is used as the `emoji_code` sent\n * with a reaction so that push notifications can render the emoji.\n *\n * Returns `undefined` when no `unicode` is available for the type (e.g. legacy\n * array reaction options or custom options that omit `unicode`).\n */\nexport const getEmojiCodeByReactionType = (\n  reactionOptions: ReactionOptions,\n  reactionType: string,\n): string | undefined => {\n  // Legacy array reaction options carry no unicode data.\n  if (Array.isArray(reactionOptions)) return undefined;\n\n  const unicode =\n    reactionOptions.quick[reactionType]?.unicode ??\n    reactionOptions.extended?.[reactionType]?.unicode;\n\n  return unicode ? unicodeToEmoji(unicode) : undefined;\n};\n"],"mappings":";;;AA2BA,IAAa,oBAEX,kBAC6E;CAC7E,IAAI,CAAC,iBAAiB,CAAC,cAAc,QACnC,OAAO,CAAC;CAGV,MAAM,SAA8C,CAAC;CAErD,KAAK,MAAM,WAAW,cAAc,QAAQ;EAC1C,MAAM,YAAY,cAAc,OAAO;EACvC,MAAM,CAAC,cAAc,UAAU;EAE/B,IAAI,CAAC,cAAc,CAAC,WAAW,QAAQ;EAEvC,MAAM,cAAc,WAAW;EAE/B,MAAM,UAAU,eAAe,WAAW;EAE1C,OAAO,WAAW;GAChB,iBAAiB,oBAAA,YAAA,EAAA,UAAG,YAAc,CAAA;GAClC,MAAM,UAAU;GAChB;EACF;CACF;CAEA,OAAO;AACT;AAOA,IAAa,kBAAkB,UAAkB;CAC/C,MAAM,iBAAiB,CAAC;CACxB,KAAK,MAAM,KAAK,OAAO;EAErB,MAAM,YAAY,EAAE,YAAY,CAAC;EACjC,eAAe,KAAK,KAAK,UAAU,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,GAAG,GAAG,GAAG;CAClF;CAEA,OAAO,eAAe,KAAK,GAAG;AAChC;AAEA,IAAa,kBAAkB,YAC7B,QACG,MAAM,GAAG,CAAC,CACV,KAAK,SAAS,OAAO,cAAc,SAAS,KAAK,QAAQ,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CACzE,KAAK,EAAE;AAEZ,IAAa,yBAA0C,EACrD,OAAO;CACL,MAAM;EACJ,iBAAiB,oBAAA,YAAA,EAAA,UAAE,KAAI,CAAA;EACvB,MAAM;EACN,SAAS,eAAe,IAAI;CAC9B;CACA,MAAM;EACJ,iBAAiB,oBAAA,YAAA,EAAA,UAAE,KAAI,CAAA;EACvB,MAAM;EACN,SAAS,eAAe,IAAI;CAC9B;CACA,MAAM;EACJ,iBAAiB,oBAAA,YAAA,EAAA,UAAE,KAAI,CAAA;EACvB,MAAM;EACN,SAAS,eAAe,IAAI;CAC9B;CACA,KAAK;EAAE,iBAAiB,oBAAA,YAAA,EAAA,UAAE,KAAI,CAAA;EAAG,MAAM;EAAO,SAAS,eAAe,IAAI;CAAE;CAC5E,KAAK;EACH,iBAAiB,oBAAA,YAAA,EAAA,UAAE,KAAI,CAAA;EACvB,MAAM;EACN,SAAS,eAAe,IAAI;CAC9B;CACA,MAAM;EACJ,iBAAiB,oBAAA,YAAA,EAAA,UAAE,KAAI,CAAA;EACvB,MAAM;EACN,SAAS,eAAe,IAAI;CAC9B;AACF,EACF;AAEA,IAAa,2BAA2B,oBACtC,CAAC,MAAM,QAAQ,eAAe,KAC9B,OAAO,gBAAgB,aAAa,eACpC,OAAO,KAAK,gBAAgB,QAAQ,CAAC,CAAC,SAAS;;;;;;;;;AAUjD,IAAa,8BACX,iBACA,iBACuB;CAEvB,IAAI,MAAM,QAAQ,eAAe,GAAG,OAAO,KAAA;CAE3C,MAAM,UACJ,gBAAgB,MAAM,aAAa,EAAE,WACrC,gBAAgB,WAAW,aAAa,EAAE;CAE5C,OAAO,UAAU,eAAe,OAAO,IAAI,KAAA;AAC7C"}

package/dist/es/components/Reactions/utils/utils.mjs

@@ -0,0 +1,13 @@
+//#region src/components/Reactions/utils/utils.ts
+var getImageDimensions = (source) => new Promise((resolve, reject) => {
+	const image = new Image();
+	image.addEventListener("load", () => {
+		resolve([image.width, image.height]);
+	}, { once: true });
+	image.addEventListener("error", () => reject(`Couldn't load image from ${source}`), { once: true });
+	image.src = source;
+});
+//#endregion
+export { getImageDimensions };
+
+//# sourceMappingURL=utils.mjs.map

package/dist/es/components/Reactions/utils/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../../src/components/Reactions/utils/utils.ts"],"sourcesContent":["import type { ForwardedRef, MutableRefObject } from 'react';\n\nexport const isMutableRef = <T>(\n  ref: ForwardedRef<T> | null,\n): ref is MutableRefObject<T> => {\n  if (ref) {\n    return (ref as MutableRefObject<T>).current !== undefined;\n  }\n  return false;\n};\n\nexport const getImageDimensions = (source: string) =>\n  new Promise<[number, number]>((resolve, reject) => {\n    const image = new Image();\n\n    image.addEventListener(\n      'load',\n      () => {\n        resolve([image.width, image.height]);\n      },\n      { once: true },\n    );\n\n    image.addEventListener('error', () => reject(`Couldn't load image from ${source}`), {\n      once: true,\n    });\n\n    image.src = source;\n  });\n"],"mappings":";AAWA,IAAa,sBAAsB,WACjC,IAAI,SAA2B,SAAS,WAAW;CACjD,MAAM,QAAQ,IAAI,MAAM;CAExB,MAAM,iBACJ,cACM;EACJ,QAAQ,CAAC,MAAM,OAAO,MAAM,MAAM,CAAC;CACrC,GACA,EAAE,MAAM,KAAK,CACf;CAEA,MAAM,iBAAiB,eAAe,OAAO,4BAA4B,QAAQ,GAAG,EAClF,MAAM,KACR,CAAC;CAED,MAAM,MAAM;AACd,CAAC"}

package/dist/es/components/SafeAnchor/SafeAnchor.mjs

@@ -0,0 +1,21 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { sanitizeUrl } from "@braintree/sanitize-url";
+//#region src/components/SafeAnchor/SafeAnchor.tsx
+var UnMemoizedSafeAnchor = (props) => {
+	const { children, className, download, href, rel, target } = props;
+	if (!href) return null;
+	return /* @__PURE__ */ jsx("a", {
+		className,
+		download,
+		href: sanitizeUrl(href),
+		rel,
+		target,
+		children
+	});
+};
+var SafeAnchor = React.memo(UnMemoizedSafeAnchor);
+//#endregion
+export { SafeAnchor };
+
+//# sourceMappingURL=SafeAnchor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SafeAnchor.mjs","names":[],"sources":["../../../../src/components/SafeAnchor/SafeAnchor.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React from 'react';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\n/**\n * Similar to a regular anchor tag, but it sanitizes the href value and prevents XSS\n */\nexport type SafeAnchorProps = {\n  /** Set the className for the anchor tag element */\n  className?: string;\n  /** Specifies that the target (href attribute) will be downloaded instead of navigating to a file */\n  download?: boolean;\n  /** Set the href attribute for the anchor tag element */\n  href?: string;\n  /** Set the rel attribute for the anchor tag element */\n  rel?: string;\n  /** Set the target attribute for the anchor tag element */\n  target?: string;\n};\n\nconst UnMemoizedSafeAnchor = (props: PropsWithChildren<SafeAnchorProps>) => {\n  const { children, className, download, href, rel, target } = props;\n  if (!href) return null;\n  const sanitized = sanitizeUrl(href);\n  return (\n    <a\n      className={className}\n      download={download}\n      href={sanitized}\n      rel={rel}\n      target={target}\n    >\n      {children}\n    </a>\n  );\n};\n\nexport const SafeAnchor = React.memo(UnMemoizedSafeAnchor) as typeof UnMemoizedSafeAnchor;\n"],"mappings":";;;;AAoBA,IAAM,wBAAwB,UAA8C;CAC1E,MAAM,EAAE,UAAU,WAAW,UAAU,MAAM,KAAK,WAAW;CAC7D,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,oBAAC,KAAD;EACa;EACD;EACV,MALc,YAAY,IAKpB;EACD;EACG;EAEP;CACA,CAAA;AAEP;AAEA,IAAa,aAAa,MAAM,KAAK,oBAAoB"}

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

@@ -0,0 +1,40 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { SearchContextProvider } from "./SearchContext.mjs";
+import { SearchBar } from "./SearchBar/SearchBar.mjs";
+import { SearchResults } from "./SearchResults/SearchResults.mjs";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Search/Search.tsx
+var searchControllerStateSelector = (nextValue) => ({ isActive: nextValue.isActive });
+var Search = ({ directMessagingChannelType = "messaging", disabled, exitSearchOnInputBlur = false, inputProps, placeholder }) => {
+	const { SearchBar: SearchBar$1 = SearchBar, SearchResults: SearchResults$1 = SearchResults } = useComponentContext();
+	const containerRef = useRef(null);
+	const filterButtonsContainerRef = useRef(null);
+	const { searchController } = useChatContext();
+	const { isActive } = useStateStore(searchController.state, searchControllerStateSelector);
+	return /* @__PURE__ */ jsx(SearchContextProvider, {
+		value: {
+			containerRef,
+			directMessagingChannelType,
+			disabled,
+			exitSearchOnInputBlur,
+			filterButtonsContainerRef,
+			inputProps,
+			placeholder,
+			searchController
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("str-chat__search", { "str-chat__search--active": isActive }),
+			"data-testid": "search",
+			ref: containerRef,
+			children: [/* @__PURE__ */ jsx(SearchBar$1, {}), /* @__PURE__ */ jsx(SearchResults$1, {})]
+		})
+	});
+};
+//#endregion
+export { Search };
+
+//# sourceMappingURL=Search.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.mjs","names":[],"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport type { SearchControllerState } from 'stream-chat';\n\nimport { SearchBar as DefaultSearchBar } from './SearchBar/SearchBar';\nimport { SearchResults as DefaultSearchResults } from './SearchResults/SearchResults';\nimport { SearchContextProvider } from './SearchContext';\nimport { useChatContext, useComponentContext } from '../../context';\nimport { useStateStore } from '../../store';\n\ntype SearchControllerStateSelectorReturnValue = {\n  isActive: boolean;\n};\n\nconst searchControllerStateSelector = (\n  nextValue: SearchControllerState,\n): SearchControllerStateSelectorReturnValue => ({ isActive: nextValue.isActive });\n\nexport type SearchProps = {\n  /** The type of channel to create on user result select, defaults to `messaging` */\n  directMessagingChannelType?: string;\n  /** Sets the input element into disabled state */\n  disabled?: boolean;\n  /** Clear the search state/results on every click outside the search input, defaults to `false` */\n  exitSearchOnInputBlur?: boolean;\n  /**\n   * Extra props spread onto the search `<input>` element — e.g. to opt the field out of password\n   * managers (`data-1p-ignore`, `data-lpignore`, `autoComplete: 'off'`) or add `name`/`aria-*`\n   * attributes. The component's own controlled props (`value`, `onChange`, `onBlur`, `type`, `id`,\n   * `disabled`, `ref`) take precedence and cannot be overridden; `className` is merged.\n   */\n  inputProps?: React.ComponentPropsWithoutRef<'input'>;\n  /** Custom placeholder text to be displayed in the search input */\n  placeholder?: string;\n};\n\nexport const Search = ({\n  directMessagingChannelType = 'messaging',\n  disabled,\n  exitSearchOnInputBlur = false,\n  inputProps,\n  placeholder,\n}: SearchProps) => {\n  const { SearchBar = DefaultSearchBar, SearchResults = DefaultSearchResults } =\n    useComponentContext();\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const filterButtonsContainerRef = useRef<HTMLDivElement | null>(null);\n\n  const { searchController } = useChatContext();\n\n  const { isActive } = useStateStore<\n    SearchControllerState,\n    SearchControllerStateSelectorReturnValue\n  >(searchController.state, searchControllerStateSelector);\n\n  return (\n    <SearchContextProvider\n      value={{\n        containerRef,\n        directMessagingChannelType,\n        disabled,\n        exitSearchOnInputBlur,\n        filterButtonsContainerRef,\n        inputProps,\n        placeholder,\n        searchController,\n      }}\n    >\n      <div\n        className={clsx('str-chat__search', {\n          'str-chat__search--active': isActive,\n        })}\n        data-testid='search'\n        ref={containerRef}\n      >\n        <SearchBar />\n        <SearchResults />\n      </div>\n    </SearchContextProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;AAcA,IAAM,iCACJ,eAC8C,EAAE,UAAU,UAAU,SAAS;AAoB/E,IAAa,UAAU,EACrB,6BAA6B,aAC7B,UACA,wBAAwB,OACxB,YACA,kBACiB;CACjB,MAAM,EAAE,WAAA,cAAY,WAAkB,eAAA,kBAAgB,kBACpD,oBAAoB;CACtB,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,4BAA4B,OAA8B,IAAI;CAEpE,MAAM,EAAE,qBAAqB,eAAe;CAE5C,MAAM,EAAE,aAAa,cAGnB,iBAAiB,OAAO,6BAA6B;CAEvD,OACE,oBAAC,uBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,qBAAC,OAAD;GACE,WAAW,KAAK,oBAAoB,EAClC,4BAA4B,SAC9B,CAAC;GACD,eAAY;GACZ,KAAK;aALP,CAOE,oBAAC,aAAD,CAAY,CAAA,GACZ,oBAAC,iBAAD,CAAgB,CAAA,CACb;;CACgB,CAAA;AAE3B"}

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

@@ -0,0 +1,114 @@
+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 { 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";
+//#region src/components/Search/SearchBar/SearchBar.tsx
+var searchControllerStateSelector = (nextValue) => ({
+	isActive: nextValue.isActive,
+	searchQuery: nextValue.searchQuery
+});
+var SearchBar = () => {
+	const { t } = useTranslationContext();
+	const { IconSearch, IconXCircle } = useComponentContextIcons();
+	const { announceInteraction } = useInteractionAnnouncements();
+	const { containerRef, disabled, exitSearchOnInputBlur, inputProps, placeholder, searchController } = useSearchContext();
+	const queriesInProgress = useSearchQueriesInProgress(searchController);
+	const [input, setInput] = useState(null);
+	const pointerDownInsideRef = useRef(false);
+	const { isActive, searchQuery } = useStateStore(searchController.state, searchControllerStateSelector);
+	useEffect(() => {
+		const handlePointerDown = (event) => {
+			pointerDownInsideRef.current = !!containerRef.current?.contains(event.target);
+		};
+		document.addEventListener("pointerdown", handlePointerDown, true);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown, true);
+		};
+	}, [containerRef]);
+	useEffect(() => {
+		if (!input) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				searchController.exit();
+				input.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [searchController, input]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__search-bar",
+		"data-testid": "search-bar",
+		role: "search",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("str-chat__search-bar__input-wrapper", { "str-chat__search-bar__input-wrapper--active": isActive }),
+			children: [
+				/* @__PURE__ */ jsx(IconSearch, {}),
+				/* @__PURE__ */ jsx("input", {
+					...inputProps,
+					"aria-label": t("common.search.ariaLabel", "Search"),
+					className: clsx("str-chat__search-bar__input", inputProps?.className),
+					"data-testid": "search-input",
+					disabled,
+					onBlur: ({ relatedTarget }) => {
+						if (!exitSearchOnInputBlur) return;
+						const focusMovedInside = !!containerRef.current?.contains(relatedTarget);
+						const pressedInside = relatedTarget === null && pointerDownInsideRef.current;
+						pointerDownInsideRef.current = false;
+						if (!focusMovedInside && !pressedInside) searchController.exit();
+					},
+					onChange: (event) => {
+						if (event.target.value) {
+							searchController.activate();
+							searchController.search(event.target.value);
+						} else searchController.clear();
+					},
+					placeholder: placeholder ?? t("common.search.ariaLabel", "Search"),
+					ref: setInput,
+					type: "text",
+					value: searchQuery
+				}),
+				searchQuery && /* @__PURE__ */ jsx(Button, {
+					appearance: "ghost",
+					"aria-label": t("search.bar.clearSearch.ariaLabel", "Clear search"),
+					circular: true,
+					className: "str-chat__search-bar__clear-button",
+					"data-testid": "clear-input-button",
+					disabled: queriesInProgress.length > 0,
+					onClick: () => {
+						searchController.clear();
+						input?.focus();
+						announceInteraction("search.cleared");
+					},
+					size: "xs",
+					variant: "secondary",
+					children: /* @__PURE__ */ jsx(IconXCircle, {})
+				})
+			]
+		}), isActive && /* @__PURE__ */ jsx(Button, {
+			appearance: "ghost",
+			"aria-label": t("search.bar.exitSearch.ariaLabel", "Exit search"),
+			className: "str-chat__search-bar__exit-search-button",
+			"data-testid": "search-bar-button",
+			onClick: () => {
+				searchController.exit();
+				input?.focus();
+			},
+			size: "sm",
+			variant: "secondary",
+			children: t("common.cancel.label", "Cancel")
+		})]
+	});
+};
+//#endregion
+export { SearchBar };
+
+//# sourceMappingURL=SearchBar.mjs.map

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

@@ -0,0 +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 { 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

@@ -0,0 +1,17 @@
+import { requireContext } from "../../context/requireContext.mjs";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Search/SearchContext.tsx
+var SearchContext = createContext(void 0);
+/**
+* Context provider for components rendered within the `Search` component
+*/
+var SearchContextProvider = ({ children, value }) => /* @__PURE__ */ jsx(SearchContext.Provider, {
+	value,
+	children
+});
+var useSearchContext = () => requireContext(useContext(SearchContext), "useSearchContext", "SearchContextProvider");
+//#endregion
+export { SearchContext, SearchContextProvider, useSearchContext };
+
+//# sourceMappingURL=SearchContext.mjs.map

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

@@ -0,0 +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';\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"}