stream-chat-react 14.3.0 → 14.4.1

package/dist/cjs/ReactPlayerWrapper.16cd6fed.js

@@ -0,0 +1,24 @@
+const require_useNotificationApi = require("./useNotificationApi.9ffe5761.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_player = require("react-player");
+react_player = require_useNotificationApi.__toESM(react_player);
+//#region src/components/VideoPlayer/ReactPlayerWrapper.tsx
+var ReactPlayer = react_player.default.default ?? react_player.default;
+/**
+* Default-exported so `VideoPlayer` can code-split it via `React.lazy`, keeping
+* `react-player` (~2 MB) out of the SDK's eager import graph — it is fetched
+* only when a default video player actually renders.
+*/
+var ReactPlayerWrapper = ({ isPlaying, thumbnailUrl, videoUrl }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReactPlayer, {
+	className: "react-player",
+	config: { file: { attributes: { poster: thumbnailUrl } } },
+	controls: true,
+	height: "100%",
+	playing: isPlaying,
+	url: videoUrl,
+	width: "100%"
+});
+//#endregion
+exports.default = ReactPlayerWrapper;
+
+//# sourceMappingURL=ReactPlayerWrapper.16cd6fed.js.map

package/dist/cjs/ReactPlayerWrapper.16cd6fed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactPlayerWrapper.16cd6fed.js","names":[],"sources":["../../src/components/VideoPlayer/ReactPlayerWrapper.tsx"],"sourcesContent":["import ReactPlayerImport from 'react-player';\n\nimport type { VideoPlayerProps } from './VideoPlayer';\n\n// react-player ships as CJS with the component on `exports.default`. Some\n// bundler/interop setups (e.g. Vite serving our built ESM as a linked workspace\n// dependency) hand back the module namespace `{ default }` instead of the\n// component itself, which makes React throw \"Element type is invalid ... got:\n// object\". Unwrap the default defensively so it works regardless of interop.\nconst ReactPlayer =\n  (ReactPlayerImport as unknown as { default?: typeof ReactPlayerImport }).default ??\n  ReactPlayerImport;\n\n/**\n * Default-exported so `VideoPlayer` can code-split it via `React.lazy`, keeping\n * `react-player` (~2 MB) out of the SDK's eager import graph — it is fetched\n * only when a default video player actually renders.\n */\nconst ReactPlayerWrapper = ({ isPlaying, thumbnailUrl, videoUrl }: VideoPlayerProps) => (\n  <ReactPlayer\n    className='react-player'\n    config={{ file: { attributes: { poster: thumbnailUrl } } }}\n    controls\n    height='100%'\n    playing={isPlaying}\n    url={videoUrl}\n    width='100%'\n  />\n);\n\nexport default ReactPlayerWrapper;\n"],"mappings":";;;;;AASA,IAAM,cACH,aAAA,QAAwE,WACzE,aAAA;;;;;;AAOF,IAAM,sBAAsB,EAAE,WAAW,cAAc,eACrD,iBAAA,GAAA,kBAAA,KAAC,aAAD;CACE,WAAU;CACV,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,aAAa,EAAE,EAAE;CACzD,UAAA;CACA,QAAO;CACP,SAAS;CACT,KAAK;CACL,OAAM;AACP,CAAA"}

package/dist/cjs/audioProcessing.22303d69.js

@@ -0,0 +1,148 @@
+let react = require("react");
+//#region src/components/ReactFileUtilities/utils.ts
+var useHandleFileChangeWrapper = (resetOnChange = false, handler) => (0, react.useCallback)(({ currentTarget }) => {
+	const { files } = currentTarget;
+	if (!files) return;
+	try {
+		handler?.(Array.from(files));
+	} catch (error) {
+		console.error(error);
+	}
+	if (resetOnChange) currentTarget.value = "";
+}, [handler, resetOnChange]);
+async function dataTransferItemsToFiles(items) {
+	if (!items || !items.length) return [];
+	const fileLikes = getFileLikes(items);
+	if (fileLikes.length) return fileLikes;
+	const blobPromises = [];
+	for (const item of items) if (item.type === "text/html") blobPromises.push(new Promise((accept) => {
+		item.getAsString(async (s) => {
+			const imagePromises = extractImageSources(s).map((src) => getImageSource(fileLikes, src));
+			await Promise.all(imagePromises);
+			accept();
+		});
+	}));
+	await Promise.all(blobPromises);
+	return fileLikes;
+}
+function getFileLikes(items) {
+	const fileLikes = [];
+	for (const item of items) if (item.kind === "file") {
+		const file = item.getAsFile();
+		if (file) fileLikes.push(file);
+	}
+	return fileLikes;
+}
+async function getImageSource(fileLikes, src) {
+	let res;
+	try {
+		res = await fetch(src);
+	} catch (e) {
+		return;
+	}
+	const contentType = res.headers.get("Content-type") || "application/octet-stream";
+	const buf = await res.arrayBuffer();
+	const blob = new Blob([buf], { type: contentType });
+	fileLikes.push(blob);
+}
+var extractImageSources = (s) => {
+	const imageTags = new DOMParser().parseFromString(s, "text/html").getElementsByTagName("img");
+	return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
+};
+var createFileFromBlobs = ({ blobsArray, fileName, mimeType }) => {
+	const concatenatedBlob = new Blob(blobsArray, { type: mimeType });
+	return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });
+};
+var getExtensionFromMimeType = (mimeType) => {
+	const match = mimeType.match(/\/([^/;]+)/);
+	return match && match[1];
+};
+var getRecordedMediaTypeFromMimeType = (mimeType) => {
+	const match = mimeType.match(/^(audio|video)\/.*$/);
+	return match && match[1];
+};
+var readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
+	const fileReader = new FileReader();
+	fileReader.onload = () => {
+		resolve(fileReader.result);
+	};
+	fileReader.onerror = () => {
+		reject(fileReader.error);
+	};
+	fileReader.readAsArrayBuffer(file);
+});
+//#endregion
+//#region src/components/MediaRecorder/transcode/audioProcessing.ts
+/**
+* In the context of resampling audio data, AudioContext is used to decode the input audio file into an AudioBuffer,
+* which is a fundamental data structure representing audio data.
+* @param file
+*/
+var toAudioBuffer = async (file) => {
+	const audioCtx = new AudioContext();
+	const arrayBuffer = await readFileAsArrayBuffer(file);
+	const decodedData = await audioCtx.decodeAudioData(arrayBuffer);
+	if (audioCtx.state !== "closed") await audioCtx.close();
+	return decodedData;
+};
+/**
+* OfflineAudioContext is a specialized type of AudioContext that does not render audio in real-time and is used for offline audio processing tasks.
+* It allows performing audio processing and rendering without actually playing the audio through speakers or outputting it to a destination.
+* In the context of resampling audio data, OfflineAudioContext is used to resample the decoded AudioBuffer from a file to the desired sample rate.
+* It provides more flexibility and control over audio processing, as it can operate at different sample rates and durations compared to real-time audio contexts.
+* @param audioBuffer
+* @param sampleRate
+*/
+var renderAudio = async (audioBuffer, sampleRate) => {
+	const offlineAudioCtx = new OfflineAudioContext(audioBuffer.numberOfChannels, audioBuffer.duration * sampleRate, sampleRate);
+	const source = offlineAudioCtx.createBufferSource();
+	source.buffer = audioBuffer;
+	source.connect(offlineAudioCtx.destination);
+	source.start();
+	return await offlineAudioCtx.startRendering();
+};
+//#endregion
+Object.defineProperty(exports, "createFileFromBlobs", {
+	enumerable: true,
+	get: function() {
+		return createFileFromBlobs;
+	}
+});
+Object.defineProperty(exports, "dataTransferItemsToFiles", {
+	enumerable: true,
+	get: function() {
+		return dataTransferItemsToFiles;
+	}
+});
+Object.defineProperty(exports, "getExtensionFromMimeType", {
+	enumerable: true,
+	get: function() {
+		return getExtensionFromMimeType;
+	}
+});
+Object.defineProperty(exports, "getRecordedMediaTypeFromMimeType", {
+	enumerable: true,
+	get: function() {
+		return getRecordedMediaTypeFromMimeType;
+	}
+});
+Object.defineProperty(exports, "renderAudio", {
+	enumerable: true,
+	get: function() {
+		return renderAudio;
+	}
+});
+Object.defineProperty(exports, "toAudioBuffer", {
+	enumerable: true,
+	get: function() {
+		return toAudioBuffer;
+	}
+});
+Object.defineProperty(exports, "useHandleFileChangeWrapper", {
+	enumerable: true,
+	get: function() {
+		return useHandleFileChangeWrapper;
+	}
+});
+
+//# sourceMappingURL=audioProcessing.22303d69.js.map

package/dist/cjs/audioProcessing.22303d69.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioProcessing.22303d69.js","names":[],"sources":["../../src/components/ReactFileUtilities/utils.ts","../../src/components/MediaRecorder/transcode/audioProcessing.ts"],"sourcesContent":["import type { FileLike, RecordedMediaType } from './types';\nimport type { ChangeEvent } from 'react';\nimport { useCallback } from 'react';\n\nexport const useHandleFileChangeWrapper = (\n  resetOnChange = false,\n  handler?: (files: Array<File>) => void,\n) =>\n  useCallback(\n    ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {\n      const { files } = currentTarget;\n\n      if (!files) return;\n\n      try {\n        handler?.(Array.from(files));\n      } catch (error) {\n        console.error(error);\n      }\n\n      if (resetOnChange) currentTarget.value = '';\n    },\n    [handler, resetOnChange],\n  );\n\nexport function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {\n  if (!items || !items.length) {\n    return false;\n  }\n  for (const item of items) {\n    if (item.kind === 'file' || item.type === 'text/html') {\n      return true;\n    }\n  }\n  return false;\n}\n\nexport async function dataTransferItemsToFiles(\n  items?: DataTransferItem[],\n): Promise<FileLike[]> {\n  if (!items || !items.length) {\n    return [];\n  }\n\n  // If there are files inside the DataTransferItem prefer those\n  const fileLikes = getFileLikes(items);\n  if (fileLikes.length) {\n    return fileLikes;\n  }\n\n  // Otherwise extract images from html\n  const blobPromises = [];\n  for (const item of items) {\n    if (item.type === 'text/html') {\n      blobPromises.push(\n        new Promise<void>((accept) => {\n          item.getAsString(async (s) => {\n            const imagePromises = extractImageSources(s).map((src) =>\n              getImageSource(fileLikes, src),\n            );\n\n            await Promise.all(imagePromises);\n            accept();\n          });\n        }),\n      );\n    }\n  }\n  await Promise.all(blobPromises);\n  return fileLikes;\n}\n\nfunction getFileLikes(items: DataTransferItem[]) {\n  const fileLikes = [];\n  for (const item of items) {\n    if (item.kind === 'file') {\n      const file = item.getAsFile();\n      if (file) {\n        fileLikes.push(file);\n      }\n    }\n  }\n  return fileLikes;\n}\n\nasync function getImageSource(fileLikes: FileLike[], src: string) {\n  let res;\n  try {\n    res = await fetch(src);\n  } catch (e) {\n    return;\n  }\n  const contentType = res.headers.get('Content-type') || 'application/octet-stream';\n  const buf = await res.arrayBuffer();\n  const blob = new Blob([buf], { type: contentType });\n  fileLikes.push(blob);\n}\n\nconst extractImageSources = (s: string) => {\n  const imageTags = new DOMParser()\n    .parseFromString(s, 'text/html')\n    .getElementsByTagName('img');\n  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);\n};\n\nexport const isBlobButNotFile = (obj: unknown): obj is Blob =>\n  obj instanceof Blob && !(obj instanceof File);\n\nexport const createFileFromBlobs = ({\n  blobsArray,\n  fileName,\n  mimeType,\n}: {\n  blobsArray: Blob[];\n  fileName: string;\n  mimeType: string;\n}) => {\n  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });\n  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });\n};\n\nexport const getExtensionFromMimeType = (mimeType: string) => {\n  const match = mimeType.match(/\\/([^/;]+)/);\n  return match && match[1];\n};\n\nexport const getRecordedMediaTypeFromMimeType = (\n  mimeType: string,\n): RecordedMediaType | null => {\n  const match = mimeType.match(/^(audio|video)\\/.*$/);\n  return match && (match[1] as RecordedMediaType);\n};\n\nexport const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> =>\n  new Promise((resolve, reject) => {\n    const fileReader = new FileReader();\n    fileReader.onload = () => {\n      resolve(fileReader.result as ArrayBuffer);\n    };\n\n    fileReader.onerror = () => {\n      reject(fileReader.error);\n    };\n\n    fileReader.readAsArrayBuffer(file);\n  });\n\nexport const generateFileName = (mimeType: string) =>\n  `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;\n","import { readFileAsArrayBuffer } from '../../ReactFileUtilities';\n\n/**\n * In the context of resampling audio data, AudioContext is used to decode the input audio file into an AudioBuffer,\n * which is a fundamental data structure representing audio data.\n * @param file\n */\nexport const toAudioBuffer = async (file: File) => {\n  const audioCtx = new AudioContext();\n\n  const arrayBuffer = await readFileAsArrayBuffer(file);\n  const decodedData = await audioCtx.decodeAudioData(arrayBuffer);\n  if (audioCtx.state !== 'closed') await audioCtx.close();\n  return decodedData;\n};\n\n/**\n * OfflineAudioContext is a specialized type of AudioContext that does not render audio in real-time and is used for offline audio processing tasks.\n * It allows performing audio processing and rendering without actually playing the audio through speakers or outputting it to a destination.\n * In the context of resampling audio data, OfflineAudioContext is used to resample the decoded AudioBuffer from a file to the desired sample rate.\n * It provides more flexibility and control over audio processing, as it can operate at different sample rates and durations compared to real-time audio contexts.\n * @param audioBuffer\n * @param sampleRate\n */\nexport const renderAudio = async (audioBuffer: AudioBuffer, sampleRate: number) => {\n  const offlineAudioCtx = new OfflineAudioContext(\n    audioBuffer.numberOfChannels,\n    audioBuffer.duration * sampleRate,\n    sampleRate,\n  );\n  const source = offlineAudioCtx.createBufferSource();\n  source.buffer = audioBuffer;\n  source.connect(offlineAudioCtx.destination);\n  source.start();\n\n  return await offlineAudioCtx.startRendering();\n};\n"],"mappings":";;AAIA,IAAa,8BACX,gBAAgB,OAChB,aAAA,GAAA,MAAA,cAGG,EAAE,oBAAmD;CACpD,MAAM,EAAE,UAAU;CAElB,IAAI,CAAC,OAAO;CAEZ,IAAI;EACF,UAAU,MAAM,KAAK,KAAK,CAAC;CAC7B,SAAS,OAAO;EACd,QAAQ,MAAM,KAAK;CACrB;CAEA,IAAI,eAAe,cAAc,QAAQ;AAC3C,GACA,CAAC,SAAS,aAAa,CACzB;AAcF,eAAsB,yBACpB,OACqB;CACrB,IAAI,CAAC,SAAS,CAAC,MAAM,QACnB,OAAO,CAAC;CAIV,MAAM,YAAY,aAAa,KAAK;CACpC,IAAI,UAAU,QACZ,OAAO;CAIT,MAAM,eAAe,CAAC;CACtB,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,aAChB,aAAa,KACX,IAAI,SAAe,WAAW;EAC5B,KAAK,YAAY,OAAO,MAAM;GAC5B,MAAM,gBAAgB,oBAAoB,CAAC,EAAE,KAAK,QAChD,eAAe,WAAW,GAAG,CAC/B;GAEA,MAAM,QAAQ,IAAI,aAAa;GAC/B,OAAO;EACT,CAAC;CACH,CAAC,CACH;CAGJ,MAAM,QAAQ,IAAI,YAAY;CAC9B,OAAO;AACT;AAEA,SAAS,aAAa,OAA2B;CAC/C,MAAM,YAAY,CAAC;CACnB,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,QAAQ;EACxB,MAAM,OAAO,KAAK,UAAU;EAC5B,IAAI,MACF,UAAU,KAAK,IAAI;CAEvB;CAEF,OAAO;AACT;AAEA,eAAe,eAAe,WAAuB,KAAa;CAChE,IAAI;CACJ,IAAI;EACF,MAAM,MAAM,MAAM,GAAG;CACvB,SAAS,GAAG;EACV;CACF;CACA,MAAM,cAAc,IAAI,QAAQ,IAAI,cAAc,KAAK;CACvD,MAAM,MAAM,MAAM,IAAI,YAAY;CAClC,MAAM,OAAO,IAAI,KAAK,CAAC,GAAG,GAAG,EAAE,MAAM,YAAY,CAAC;CAClD,UAAU,KAAK,IAAI;AACrB;AAEA,IAAM,uBAAuB,MAAc;CACzC,MAAM,YAAY,IAAI,UAAU,EAC7B,gBAAgB,GAAG,WAAW,EAC9B,qBAAqB,KAAK;CAC7B,OAAO,MAAM,KAAK,YAAY,QAAQ,IAAI,GAAG,EAAE,QAAQ,QAAQ,GAAG;AACpE;AAKA,IAAa,uBAAuB,EAClC,YACA,UACA,eAKI;CACJ,MAAM,mBAAmB,IAAI,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;CAChE,OAAO,IAAI,KAAK,CAAC,gBAAgB,GAAG,UAAU,EAAE,MAAM,iBAAiB,KAAK,CAAC;AAC/E;AAEA,IAAa,4BAA4B,aAAqB;CAC5D,MAAM,QAAQ,SAAS,MAAM,YAAY;CACzC,OAAO,SAAS,MAAM;AACxB;AAEA,IAAa,oCACX,aAC6B;CAC7B,MAAM,QAAQ,SAAS,MAAM,qBAAqB;CAClD,OAAO,SAAU,MAAM;AACzB;AAEA,IAAa,yBAAyB,SACpC,IAAI,SAAS,SAAS,WAAW;CAC/B,MAAM,aAAa,IAAI,WAAW;CAClC,WAAW,eAAe;EACxB,QAAQ,WAAW,MAAqB;CAC1C;CAEA,WAAW,gBAAgB;EACzB,OAAO,WAAW,KAAK;CACzB;CAEA,WAAW,kBAAkB,IAAI;AACnC,CAAC;;;;;;;;AC1IH,IAAa,gBAAgB,OAAO,SAAe;CACjD,MAAM,WAAW,IAAI,aAAa;CAElC,MAAM,cAAc,MAAM,sBAAsB,IAAI;CACpD,MAAM,cAAc,MAAM,SAAS,gBAAgB,WAAW;CAC9D,IAAI,SAAS,UAAU,UAAU,MAAM,SAAS,MAAM;CACtD,OAAO;AACT;;;;;;;;;AAUA,IAAa,cAAc,OAAO,aAA0B,eAAuB;CACjF,MAAM,kBAAkB,IAAI,oBAC1B,YAAY,kBACZ,YAAY,WAAW,YACvB,UACF;CACA,MAAM,SAAS,gBAAgB,mBAAmB;CAClD,OAAO,SAAS;CAChB,OAAO,QAAQ,gBAAgB,WAAW;CAC1C,OAAO,MAAM;CAEb,OAAO,MAAM,gBAAgB,eAAe;AAC9C"}

package/dist/cjs/emojis.js

@@ -1,232 +1,217 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const Picker = require("@emoji-mart/react");
-const useNotificationApi = require("./useNotificationApi.f2c7704d.js");
-const mergeWith = require("lodash.mergewith");
-const streamChat = require("stream-chat");
-const isShadowRoot = (node) => !!node.host;
-const defaultButtonClassName = "str-chat__emoji-picker-button";
-const classNames = {
-  pickerContainerClassName: "str-chat__message-textarea-emoji-picker-container",
-  wrapperClassName: "str-chat__message-textarea-emoji-picker"
+const require_useNotificationApi = require("./useNotificationApi.9ffe5761.js");
+let react = require("react");
+react = require_useNotificationApi.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let stream_chat = require("stream-chat");
+let lodash_mergewith = require("lodash.mergewith");
+lodash_mergewith = require_useNotificationApi.__toESM(lodash_mergewith);
+let _emoji_mart_react = require("@emoji-mart/react");
+_emoji_mart_react = require_useNotificationApi.__toESM(_emoji_mart_react);
+//#region src/plugins/Emojis/EmojiPicker.tsx
+var Picker = _emoji_mart_react.default.default ?? _emoji_mart_react.default;
+var isShadowRoot = (node) => !!node.host;
+var defaultButtonClassName = "str-chat__emoji-picker-button";
+var classNames = {
+	pickerContainerClassName: "str-chat__message-textarea-emoji-picker-container",
+	wrapperClassName: "str-chat__message-textarea-emoji-picker"
+};
+var EmojiPicker = (props) => {
+	const { t } = require_useNotificationApi.useTranslationContext("EmojiPicker");
+	const { textareaRef } = require_useNotificationApi.useMessageComposerContext("EmojiPicker");
+	const { textComposer } = require_useNotificationApi.useMessageComposerController();
+	const isCooldownActive = require_useNotificationApi.useIsCooldownActive();
+	const [displayPicker, setDisplayPicker] = (0, react.useState)(false);
+	const [referenceElement, setReferenceElement] = (0, react.useState)(null);
+	const [popperElement, setPopperElement] = (0, react.useState)(null);
+	const { refs, strategy, x, y } = require_useNotificationApi.usePopoverPosition({
+		offset: 8,
+		placement: props.placement ?? "top-end"
+	});
+	(0, react.useEffect)(() => {
+		refs.setReference(referenceElement);
+	}, [referenceElement, refs]);
+	(0, react.useEffect)(() => {
+		refs.setFloating(popperElement);
+	}, [popperElement, refs]);
+	const { pickerContainerClassName, wrapperClassName } = classNames;
+	const { ButtonIconComponent = require_useNotificationApi.IconEmoji } = props;
+	const pickerStyle = props.pickerProps?.style;
+	(0, react.useEffect)(() => {
+		if (!popperElement || !referenceElement) return;
+		const handlePointerDown = (e) => {
+			const target = e.target;
+			const rootNode = target.getRootNode();
+			if (popperElement.contains(isShadowRoot(rootNode) ? rootNode.host : target) || referenceElement.contains(target)) return;
+			setDisplayPicker(false);
+		};
+		window.addEventListener("pointerdown", handlePointerDown);
+		return () => window.removeEventListener("pointerdown", handlePointerDown);
+	}, [referenceElement, popperElement]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: props.wrapperClassName ?? wrapperClassName,
+		children: [displayPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: props.pickerContainerClassName ?? pickerContainerClassName,
+			ref: setPopperElement,
+			style: {
+				left: x ?? 0,
+				position: strategy,
+				top: y ?? 0
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Picker, {
+				data: async () => (await import("@emoji-mart/data")).default,
+				onEmojiSelect: (e) => {
+					const textarea = textareaRef.current;
+					if (!textarea) return;
+					textComposer.insertText({ text: e.native });
+					textarea.focus();
+					if (props.closeOnEmojiSelect) setDisplayPicker(false);
+				},
+				...props.pickerProps,
+				style: {
+					...pickerStyle,
+					"--shadow": "none"
+				}
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+			appearance: "ghost",
+			"aria-expanded": displayPicker,
+			"aria-label": t("aria/Emoji picker"),
+			circular: true,
+			className: props.buttonClassName ?? defaultButtonClassName,
+			disabled: isCooldownActive,
+			onClick: () => setDisplayPicker((cv) => !cv),
+			ref: setReferenceElement,
+			size: "sm",
+			type: "button",
+			variant: "secondary",
+			children: ButtonIconComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonIconComponent, {})
+		})]
+	});
+};
+//#endregion
+//#region src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
+var EmojiSearchSource = class extends stream_chat.BaseSearchSource {
+	constructor(emojiSearchIndex, options) {
+		super(options);
+		this.type = "emoji";
+		this.emojiSearchIndex = emojiSearchIndex;
+	}
+	async query(searchQuery) {
+		if (searchQuery.length === 0) return {
+			items: [],
+			next: null
+		};
+		return {
+			items: (await this.emojiSearchIndex.search(searchQuery) ?? []).filter(Boolean).slice(0, 7).map(({ emoticons = [], id, name, native, skins = [] }) => {
+				const [firstSkin] = skins;
+				return {
+					emoticons,
+					id,
+					name,
+					native: native ?? firstSkin.native
+				};
+			}),
+			next: null
+		};
+	}
+	filterQueryResults(items) {
+		return items.map((item) => ({
+			...item,
+			...(0, stream_chat.getTokenizedSuggestionDisplayName)({
+				displayName: item.id,
+				searchToken: this.searchQuery
+			})
+		}));
+	}
 };
-const EmojiPicker = (props) => {
-  const { t } = useNotificationApi.useTranslationContext("EmojiPicker");
-  const { textareaRef } = useNotificationApi.useMessageComposerContext();
-  const { textComposer } = useNotificationApi.useMessageComposerController();
-  const isCooldownActive = useNotificationApi.useIsCooldownActive();
-  const [displayPicker, setDisplayPicker] = React.useState(false);
-  const [referenceElement, setReferenceElement] = React.useState(
-    null
-  );
-  const [popperElement, setPopperElement] = React.useState(null);
-  const { refs, strategy, x, y } = useNotificationApi.usePopoverPosition({
-    offset: 8,
-    placement: props.placement ?? "top-end"
-  });
-  React.useEffect(() => {
-    refs.setReference(referenceElement);
-  }, [referenceElement, refs]);
-  React.useEffect(() => {
-    refs.setFloating(popperElement);
-  }, [popperElement, refs]);
-  const { pickerContainerClassName, wrapperClassName } = classNames;
-  const { ButtonIconComponent = useNotificationApi.IconEmoji } = props;
-  const pickerStyle = props.pickerProps?.style;
-  React.useEffect(() => {
-    if (!popperElement || !referenceElement) return;
-    const handlePointerDown = (e) => {
-      const target = e.target;
-      const rootNode = target.getRootNode();
-      if (popperElement.contains(isShadowRoot(rootNode) ? rootNode.host : target) || referenceElement.contains(target)) {
-        return;
-      }
-      setDisplayPicker(false);
-    };
-    window.addEventListener("pointerdown", handlePointerDown);
-    return () => window.removeEventListener("pointerdown", handlePointerDown);
-  }, [referenceElement, popperElement]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: props.wrapperClassName ?? wrapperClassName, children: [
-    displayPicker && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: props.pickerContainerClassName ?? pickerContainerClassName,
-        ref: setPopperElement,
-        style: { left: x ?? 0, position: strategy, top: y ?? 0 },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Picker,
-          {
-            data: async () => (await import("@emoji-mart/data")).default,
-            onEmojiSelect: (e) => {
-              const textarea = textareaRef.current;
-              if (!textarea) return;
-              textComposer.insertText({ text: e.native });
-              textarea.focus();
-              if (props.closeOnEmojiSelect) {
-                setDisplayPicker(false);
-              }
-            },
-            ...props.pickerProps,
-            style: { ...pickerStyle, "--shadow": "none" }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      useNotificationApi.Button,
-      {
-        appearance: "ghost",
-        "aria-expanded": displayPicker,
-        "aria-label": t("aria/Emoji picker"),
-        circular: true,
-        className: props.buttonClassName ?? defaultButtonClassName,
-        disabled: isCooldownActive,
-        onClick: () => setDisplayPicker((cv) => !cv),
-        ref: setReferenceElement,
-        size: "sm",
-        type: "button",
-        variant: "secondary",
-        children: ButtonIconComponent && /* @__PURE__ */ jsxRuntime.jsx(ButtonIconComponent, {})
-      }
-    )
-  ] });
+var DEFAULT_OPTIONS = {
+	minChars: 1,
+	trigger: ":"
 };
-class EmojiSearchSource extends streamChat.BaseSearchSource {
-  constructor(emojiSearchIndex, options) {
-    super(options);
-    this.type = "emoji";
-    this.emojiSearchIndex = emojiSearchIndex;
-  }
-  async query(searchQuery) {
-    if (searchQuery.length === 0) {
-      return { items: [], next: null };
-    }
-    const emojis = await this.emojiSearchIndex.search(searchQuery) ?? [];
-    return {
-      items: emojis.filter(Boolean).slice(0, 7).map(({ emoticons = [], id, name, native, skins = [] }) => {
-        const [firstSkin] = skins;
-        return {
-          emoticons,
-          id,
-          name,
-          native: native ?? firstSkin.native
-        };
-      }),
-      next: null
-      // todo: generate cursor
-    };
-  }
-  filterQueryResults(items) {
-    return items.map((item) => ({
-      ...item,
-      ...streamChat.getTokenizedSuggestionDisplayName({
-        displayName: item.id,
-        searchToken: this.searchQuery
-      })
-    }));
-  }
-}
-const DEFAULT_OPTIONS = { minChars: 1, trigger: ":" };
-const createTextComposerEmojiMiddleware = (emojiSearchIndex, options) => {
-  const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});
-  const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
-  emojiSearchSource.activate();
-  return {
-    id: "stream-io/emoji-middleware",
-    // eslint-disable-next-line sort-keys
-    handlers: {
-      onChange: async ({ complete, forward, next, state }) => {
-        if (!state.selection) return forward();
-        const triggerWithToken = streamChat.getTriggerCharWithToken({
-          acceptTrailingSpaces: false,
-          text: state.text.slice(0, state.selection.end),
-          trigger: finalOptions.trigger
-        });
-        const triggerWasRemoved = !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
-        if (triggerWasRemoved) {
-          const hasSuggestionsForTrigger = state.suggestions?.trigger === finalOptions.trigger;
-          const newState = { ...state };
-          if (hasSuggestionsForTrigger && newState.suggestions) {
-            delete newState.suggestions;
-          }
-          return next(newState);
-        }
-        const newSearchTriggerred = triggerWithToken && triggerWithToken === finalOptions.trigger;
-        if (newSearchTriggerred) {
-          emojiSearchSource.resetStateAndActivate();
-        }
-        const textWithReplacedWord = await streamChat.replaceWordWithEntity({
-          caretPosition: state.selection.end,
-          getEntityString: async (word) => {
-            const { items } = await emojiSearchSource.query(word);
-            const emoji = items.filter(Boolean).slice(0, 10).find(({ emoticons }) => !!emoticons?.includes(word));
-            if (!emoji) return null;
-            const [firstSkin] = emoji.skins ?? [];
-            return emoji.native ?? firstSkin.native;
-          },
-          text: state.text
-        });
-        if (textWithReplacedWord !== state.text) {
-          return complete({
-            ...state,
-            suggestions: void 0,
-            // to prevent the TextComposerMiddlewareExecutor to run the first page query
-            text: textWithReplacedWord
-          });
-        }
-        return complete({
-          ...state,
-          suggestions: {
-            query: triggerWithToken.slice(1),
-            searchSource: emojiSearchSource,
-            trigger: finalOptions.trigger
-          }
-        });
-      },
-      onSuggestionItemSelect: ({ complete, forward, state }) => {
-        const { selectedSuggestion } = state.change ?? {};
-        if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
-          return forward();
-        emojiSearchSource.resetStateAndActivate();
-        return complete({
-          ...state,
-          ...streamChat.insertItemWithTrigger({
-            insertText: `${"native" in selectedSuggestion ? selectedSuggestion.native : ""} `,
-            selection: state.selection,
-            text: state.text,
-            trigger: finalOptions.trigger
-          }),
-          suggestions: void 0
-          // Clear suggestions after selection
-        });
-      }
-    }
-  };
+/**
+* TextComposer middleware for mentions
+* Usage:
+*
+*  const textComposer = new TextComposer(options);
+*
+*  textComposer.use(new createTextComposerEmojiMiddleware(emojiSearchIndex, {
+*   minChars: 2
+*  }));
+*
+* @param emojiSearchIndex
+* @param {{
+*     minChars: number;
+*     trigger: string;
+*   }} options
+* @returns
+*/
+var createTextComposerEmojiMiddleware = (emojiSearchIndex, options) => {
+	const finalOptions = (0, lodash_mergewith.default)(DEFAULT_OPTIONS, options ?? {});
+	const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
+	emojiSearchSource.activate();
+	return {
+		id: "stream-io/emoji-middleware",
+		handlers: {
+			onChange: async ({ complete, forward, next, state }) => {
+				if (!state.selection) return forward();
+				const triggerWithToken = (0, stream_chat.getTriggerCharWithToken)({
+					acceptTrailingSpaces: false,
+					text: state.text.slice(0, state.selection.end),
+					trigger: finalOptions.trigger
+				});
+				if (!triggerWithToken || triggerWithToken.length < finalOptions.minChars) {
+					const hasSuggestionsForTrigger = state.suggestions?.trigger === finalOptions.trigger;
+					const newState = { ...state };
+					if (hasSuggestionsForTrigger && newState.suggestions) delete newState.suggestions;
+					return next(newState);
+				}
+				if (triggerWithToken && triggerWithToken === finalOptions.trigger) emojiSearchSource.resetStateAndActivate();
+				const textWithReplacedWord = await (0, stream_chat.replaceWordWithEntity)({
+					caretPosition: state.selection.end,
+					getEntityString: async (word) => {
+						const { items } = await emojiSearchSource.query(word);
+						const emoji = items.filter(Boolean).slice(0, 10).find(({ emoticons }) => !!emoticons?.includes(word));
+						if (!emoji) return null;
+						const [firstSkin] = emoji.skins ?? [];
+						return emoji.native ?? firstSkin.native;
+					},
+					text: state.text
+				});
+				if (textWithReplacedWord !== state.text) return complete({
+					...state,
+					suggestions: void 0,
+					text: textWithReplacedWord
+				});
+				return complete({
+					...state,
+					suggestions: {
+						query: triggerWithToken.slice(1),
+						searchSource: emojiSearchSource,
+						trigger: finalOptions.trigger
+					}
+				});
+			},
+			onSuggestionItemSelect: ({ complete, forward, state }) => {
+				const { selectedSuggestion } = state.change ?? {};
+				if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger) return forward();
+				emojiSearchSource.resetStateAndActivate();
+				return complete({
+					...state,
+					...(0, stream_chat.insertItemWithTrigger)({
+						insertText: `${"native" in selectedSuggestion ? selectedSuggestion.native : ""} `,
+						selection: state.selection,
+						text: state.text,
+						trigger: finalOptions.trigger
+					}),
+					suggestions: void 0
+				});
+			}
+		}
+	};
 };
+//#endregion
 exports.EmojiPicker = EmojiPicker;
 exports.createTextComposerEmojiMiddleware = createTextComposerEmojiMiddleware;
-//# sourceMappingURL=emojis.js.map
+
+//# sourceMappingURL=emojis.js.map