@sendbird/uikit-react 3.9.1-rc-2 → 3.9.1

package/chunks/bundle-lcfgNAH-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-lcfgNAH-.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/bundle-mAbwjJsi.js

@@ -0,0 +1,26 @@
+var Colors;
+(function (Colors) {
+    Colors["ONBACKGROUND_1"] = "ONBACKGROUND_1";
+    Colors["ONBACKGROUND_2"] = "ONBACKGROUND_2";
+    Colors["ONBACKGROUND_3"] = "ONBACKGROUND_3";
+    Colors["ONBACKGROUND_4"] = "ONBACKGROUND_4";
+    Colors["ONCONTENT_1"] = "ONCONTENT_1";
+    Colors["ONCONTENT_2"] = "ONCONTENT_2";
+    Colors["PRIMARY"] = "PRIMARY";
+    Colors["ERROR"] = "ERROR";
+})(Colors || (Colors = {}));
+var changeColorToClassName = function (color) {
+    switch (color) {
+        case Colors.ONBACKGROUND_1: return 'sendbird-color--onbackground-1';
+        case Colors.ONBACKGROUND_2: return 'sendbird-color--onbackground-2';
+        case Colors.ONBACKGROUND_3: return 'sendbird-color--onbackground-3';
+        case Colors.ONBACKGROUND_4: return 'sendbird-color--onbackground-4';
+        case Colors.ONCONTENT_1: return 'sendbird-color--oncontent-1';
+        case Colors.PRIMARY: return 'sendbird-color--primary';
+        case Colors.ERROR: return 'sendbird-color--error';
+        default: return null;
+    }
+};
+
+export { Colors as C, changeColorToClassName as c };
+//# sourceMappingURL=bundle-mAbwjJsi.js.map

package/chunks/bundle-mAbwjJsi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-mAbwjJsi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/bundle-okmgQKUZ.js

@@ -0,0 +1,4 @@
+var MENTION_USER_LABEL_CLASSNAME = 'sendbird-mention-user-label';
+
+export { MENTION_USER_LABEL_CLASSNAME as M };
+//# sourceMappingURL=bundle-okmgQKUZ.js.map

package/chunks/bundle-okmgQKUZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-okmgQKUZ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/chunks/bundle-qotlr2QN.js

@@ -0,0 +1,125 @@
+import { d as VOICE_RECORDER_AUDIO_SAMPLE_RATE } from './bundle-EQ2jMcm0.js';
+import { WavHeader as ut, Mp3Encoder as ht } from '../lame.all.js';
+
+// Thanks to https://codesandbox.io/s/media-recorder-api-downsampling-16k-mp3-encode-using-lame-js-forked-n1pblw
+function encodeMp3(arrayBuffer) {
+    var wav = ut.readHeader(new DataView(arrayBuffer));
+    var dataView = new Int16Array(arrayBuffer, wav.dataOffset, wav.dataLen / 2);
+    var mp3Encoder = new ht(wav.channels, wav.sampleRate, 128);
+    var maxSamples = 1152;
+    var samplesLeft = (wav.channels === 1) ? dataView : new Int16Array(wav.dataLen / (2 * wav.channels));
+    var samplesRight = (wav.channels === 2) ? new Int16Array(wav.dataLen / (2 * wav.channels)) : undefined;
+    if (wav.channels > 1) {
+        for (var j = 0; j < samplesLeft.length; j++) {
+            samplesLeft[j] = dataView[j * 2];
+            samplesRight[j] = dataView[j * 2 + 1];
+        }
+    }
+    var dataBuffer = [];
+    var remaining = samplesLeft.length;
+    for (var i = 0; remaining >= maxSamples; i += maxSamples) {
+        var left = samplesLeft.subarray(i, i + maxSamples);
+        var right = void 0;
+        if (samplesRight) {
+            right = samplesRight.subarray(i, i + maxSamples);
+        }
+        var mp3buf = mp3Encoder.encodeBuffer(left, right);
+        dataBuffer.push(new Int8Array(mp3buf));
+        remaining -= maxSamples;
+    }
+    var mp3Lastbuf = mp3Encoder.flush();
+    dataBuffer.push(new Int8Array(mp3Lastbuf));
+    return dataBuffer;
+}
+// Convert audioFile to arrayBuffer, because Mp3Encoder requires a parameter of ArrayBuffer type
+function downsampleToWav(file, callback) {
+    // Browser compatibility
+    // https://caniuse.com/?search=AudioContext
+    var audioCtx = new AudioContext({ sampleRate: VOICE_RECORDER_AUDIO_SAMPLE_RATE });
+    var fileReader = new FileReader();
+    fileReader.onload = function (ev) {
+        // Decode audio
+        audioCtx.decodeAudioData(ev.target.result, function (buffer) {
+            // this is where you down sample the audio, usually is 44100 samples per second
+            var usingWebkit = !window.OfflineAudioContext;
+            var offlineAudioCtx = new OfflineAudioContext(1, 16000 * buffer.duration, 16000);
+            var soundSource = offlineAudioCtx.createBufferSource();
+            soundSource.buffer = buffer;
+            soundSource.connect(offlineAudioCtx.destination);
+            var reader = new FileReader();
+            reader.onload = function () {
+                var renderCompleteHandler = function (evt) {
+                    var renderedBuffer = usingWebkit ? evt.renderedBuffer : evt;
+                    var buffer = bufferToWav(renderedBuffer, renderedBuffer.length);
+                    if (callback) {
+                        callback(buffer);
+                    }
+                };
+                if (usingWebkit) {
+                    offlineAudioCtx.oncomplete = renderCompleteHandler;
+                    offlineAudioCtx.startRendering();
+                }
+                else {
+                    offlineAudioCtx
+                        .startRendering()
+                        .then(renderCompleteHandler)
+                        // eslint-disable-next-line no-console
+                        .catch(function (err) { return console.warn(err); });
+                }
+            };
+            reader.readAsArrayBuffer(file);
+            soundSource.start(0);
+        });
+    };
+    fileReader.readAsArrayBuffer(file);
+}
+function bufferToWav(abuffer, len) {
+    var numOfChan = abuffer.numberOfChannels;
+    var length = len * numOfChan * 2 + 44;
+    var buffer = new ArrayBuffer(length);
+    var view = new DataView(buffer);
+    var channels = [];
+    var i = 0;
+    var sample;
+    var offset = 0;
+    var pos = 0;
+    // write WAVE header
+    setUint32(0x46464952); // "RIFF"
+    setUint32(length - 8); // file length - 8
+    setUint32(0x45564157); // "WAVE"
+    setUint32(0x20746d66); // "fmt " chunk
+    setUint32(16); // length = 16
+    setUint16(1); // PCM (uncompressed)
+    setUint16(numOfChan);
+    setUint32(abuffer.sampleRate);
+    setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
+    setUint16(numOfChan * 2); // block-align
+    setUint16(16); // 16-bit (hardcoded in this demo)
+    setUint32(0x61746164); // "data" - chunk
+    setUint32(length - pos - 4); // chunk length
+    // write interleaved data
+    for (i = 0; i < abuffer.numberOfChannels; i++)
+        channels.push(abuffer.getChannelData(i));
+    while (pos < length) {
+        for (i = 0; i < numOfChan; i++) {
+            // interleave channels
+            sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
+            sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) | 0; // scale to 16-bit signed int
+            view.setInt16(pos, sample, true); // write 16-bit sample
+            pos += 2;
+        }
+        offset++; // next source sample
+    }
+    return buffer;
+    function setUint16(data) {
+        view.setUint16(pos, data, true);
+        pos += 2;
+    }
+    function setUint32(data) {
+        view.setUint32(pos, data, true);
+        pos += 4;
+    }
+}
+
+export { downsampleToWav, encodeMp3 };
+//# sourceMappingURL=bundle-qotlr2QN.js.map

package/chunks/bundle-qotlr2QN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-qotlr2QN.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/bundle-rMW82DKu.js

@@ -0,0 +1,174 @@
+import React__default, { useState, useMemo, useEffect } from 'react';
+import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
+import { SendingStatus } from '@sendbird/chat/message';
+import ImageRenderer, { getBorderRadiusForMultipleImageRenderer } from '../ui/ImageRenderer.js';
+import { n as getClassName, s as isGif, b as isMultipleFilesMessage } from './bundle-CQMOLj5V.js';
+import { F as FileViewer } from './bundle-DB4PuqmB.js';
+import { K } from './bundle-KZXjN5v7.js';
+
+function ImageGrid(_a) {
+    var _b;
+    var children = _a.children, className = _a.className, message = _a.message, isReactionEnabled = _a.isReactionEnabled;
+    return (React__default.createElement("div", { className: 'sendbird-image-grid-wrap' },
+        React__default.createElement("div", { className: getClassName([
+                className,
+                'sendbird-image-grid',
+                (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
+            ]) }, children)));
+}
+
+var GRID_WIDTH_CHAT_WEB = 400;
+var GRID_SIDE_PADDING = 8;
+var GRID_GAP = 4;
+var TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 54;
+var PROFILE_IMAGE_WIDTH = 40;
+var CHAT_MOBILE_SIDE_PADDING = 48;
+var THREAD_PARENT_WIDTH = 320;
+var THREAD_PARENT_SIDE_PADDING = 28;
+var THREAD_PARENT_GRID_MARGIN_LEFT = 12;
+var THREAD_CHILD_WIDTH = 200;
+var THREAD_CHILD_SIDE_PADDING = 8;
+var THREAD_CHILD_MOBILE_SIDE_PADDING = 32;
+var THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 60;
+var MULTIPLE_FILES_IMAGE_SIDE_LENGTH = {
+    CHAT_WEB: "calc(".concat(GRID_WIDTH_CHAT_WEB / 2, "px - ").concat((GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    CHAT_MOBILE: "calc(50vw - ".concat((CHAT_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    THREAD_PARENT_WEB: "calc(".concat((THREAD_PARENT_WIDTH - (THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP)) / 2, "px)"),
+    THREAD_PARENT_MOBILE: "calc(50vw - ".concat((THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_WEB: "calc(".concat((THREAD_CHILD_WIDTH - THREAD_CHILD_SIDE_PADDING - GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_MOBILE: "calc(50vw - ".concat((THREAD_CHILD_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+};
+var MULTIPLE_FILES_IMAGE_BORDER_RADIUS = {
+    CHAT_WEB: '6px',
+    CHAT_MOBILE: '6px',
+    THREAD_PARENT_WEB: '6px',
+    THREAD_PARENT_MOBILE: '6px',
+    THREAD_CHILD_WEB: '6px',
+    THREAD_CHILD_MOBILE: '6px',
+};
+var MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH = '34px';
+
+var ThreadMessageKind = {
+    PARENT: 'parent',
+    CHILD: 'child',
+};
+function MultipleFilesMessageItemBody(_a) {
+    var className = _a.className, message = _a.message, _b = _a.isReactionEnabled, isReactionEnabled = _b === void 0 ? false : _b, threadMessageKindKey = _a.threadMessageKindKey, _c = _a.statefulFileInfoList, statefulFileInfoList = _c === void 0 ? [] : _c;
+    var _d = useState(-1), currentFileViewerIndex = _d[0], setCurrentFileViewerIndex = _d[1];
+    function onClose() {
+        setCurrentFileViewerIndex(-1);
+    }
+    function onClickLeft() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === 0
+            ? statefulFileInfoList.length - 1
+            : currentFileViewerIndex - 1);
+    }
+    function onClickRight() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === statefulFileInfoList.length - 1
+            ? 0
+            : currentFileViewerIndex + 1);
+    }
+    return threadMessageKindKey && (React__default.createElement(React__default.Fragment, null,
+        currentFileViewerIndex > -1 && (React__default.createElement(FileViewer, { message: message, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose })),
+        React__default.createElement(ImageGrid, { className: className, message: message, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index) {
+            var _a, _b, _c;
+            var isGifValue = isGif(fileInfo.mimeType);
+            return React__default.createElement("div", { className: 'sendbird-multiple-files-image-renderer-wrapper', onClick: message.sendingStatus === SendingStatus.SUCCEEDED
+                    ? function () { return setCurrentFileViewerIndex(index); }
+                    : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index, "-").concat(fileInfo.url) },
+                React__default.createElement(ImageRenderer, { url: (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url, fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (style_) { return (React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style_ }, isGifValue
+                        ? React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
+                            React__default.createElement(Icon, { type: IconTypes.GIF, fillColor: IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))
+                        : React__default.createElement(Icon, { type: IconTypes.PHOTO, fillColor: IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); }, defaultComponent: React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" }, React__default.createElement(Icon, { type: IconTypes.THUMBNAIL_NONE, fillColor: IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })) }));
+        }))));
+}
+
+function useThreadMessageKindKeySelector(_a) {
+    var threadMessageKind = _a.threadMessageKind, isMobile = _a.isMobile;
+    var threadMessageKindKey = useMemo(function () {
+        return K(threadMessageKind)
+            .with(ThreadMessageKind.PARENT, function () { return (isMobile
+            ? 'THREAD_PARENT_MOBILE'
+            : 'THREAD_PARENT_WEB'); })
+            .with(ThreadMessageKind.CHILD, function () { return (isMobile
+            ? 'THREAD_CHILD_MOBILE'
+            : 'THREAD_CHILD_WEB'); })
+            .otherwise(function () { return (isMobile
+            ? 'CHAT_MOBILE'
+            : 'CHAT_WEB'); });
+    }, [isMobile, threadMessageKind]);
+    return threadMessageKindKey;
+}
+
+function createStatefulFileInfoList(message, oldStatefulFileInfoList) {
+    var _a;
+    if (!message)
+        return null;
+    // Handle sent messages.
+    if (message.sendingStatus === SendingStatus.SUCCEEDED) {
+        return message.fileInfoList.map(function (fileInfo) {
+            return {
+                fileName: fileInfo.fileName,
+                fileSize: fileInfo.fileSize,
+                mimeType: fileInfo.mimeType,
+                thumbnails: fileInfo.thumbnails,
+                url: fileInfo.url,
+                isUploaded: true,
+            };
+        });
+    }
+    // Handle unsent message.
+    if (!Array.isArray((_a = message.messageParams) === null || _a === void 0 ? void 0 : _a.fileInfoList))
+        return null;
+    return message.messageParams.fileInfoList
+        .map(function (fileInfo, index) {
+        var _a, _b, _c;
+        return ({
+            fileName: fileInfo.fileName,
+            fileSize: fileInfo.fileSize,
+            mimeType: fileInfo.mimeType,
+            /**
+             * Note here, we prioritize using fileUrl (implying uploaded state) over file.
+             * This is necessary because cache loaded pending/failed mfms is mixed with
+             * files (not yet uploaded ones) and fileUrls (uploaded).
+             *
+             * Notice that if file is used in the old state, it will not be replace with the new fileUrl
+             * because doing so will rerender the ImageRenderer component which makes rendering process awkward and slow.
+             * */
+            url: (_c = (_b = (_a = oldStatefulFileInfoList[index]) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : fileInfo.fileUrl) !== null && _c !== void 0 ? _c : (fileInfo.file instanceof Blob
+                ? URL.createObjectURL(fileInfo.file)
+                : undefined),
+            /**
+             * Side note: It was a bad design to not include this property by SDK.
+             * Because if original object has fileUrl set and no file, then uploaded result remains
+             * the same so customer cannot know whether it has been uploaded or not.
+             */
+            isUploaded: !fileInfo.file && typeof fileInfo.fileUrl === 'string' && fileInfo.fileUrl.length > 0,
+        });
+    });
+}
+
+var useStatefulFileInfoList = function (message) {
+    var _a, _b, _c;
+    var _d = useState([]), statefulFileInfoList = _d[0], setStatefulFileInfoList = _d[1];
+    useEffect(function () {
+        if (isMultipleFilesMessage(message)) {
+            var newStatefulFileInfoList = createStatefulFileInfoList(message, statefulFileInfoList);
+            setStatefulFileInfoList(newStatefulFileInfoList);
+        }
+    }, [
+        // Sent message dependency.
+        (_a = message.fileInfoList) === null || _a === void 0 ? void 0 : _a.length,
+        // Unsent message dependency.
+        /**
+         * Side note: It was a bad design to not include 'isUploaded' property by SDK.
+         * Because if original object has fileUrl set and no file, then uploaded result remains
+         * the same so customer cannot know whether it has been uploaded or not.
+         */
+        (_c = (_b = message.messageParams) === null || _b === void 0 ? void 0 : _b.fileInfoList) === null || _c === void 0 ? void 0 : _c.map(function (fileInfo) { return fileInfo.fileUrl; }).join(','),
+    ]);
+    return statefulFileInfoList;
+};
+
+export { MultipleFilesMessageItemBody as M, ThreadMessageKind as T, useStatefulFileInfoList as a, useThreadMessageKindKeySelector as u };
+//# sourceMappingURL=bundle-rMW82DKu.js.map

package/chunks/bundle-rMW82DKu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-rMW82DKu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/bundle-rgIbMndg.js

@@ -0,0 +1,18 @@
+var MessageInputKeys = {
+    Enter: 'Enter',
+    ArrowUp: 'ArrowUp',
+    ArrowDown: 'ArrowDown',
+    Backspace: 'Backspace',
+};
+var NodeTypes = {
+    ElementNode: 1,
+    TextNode: 3,
+};
+var NodeNames = {
+    Span: 'SPAN',
+    Br: 'BR',
+    Div: 'DIV',
+};
+
+export { MessageInputKeys as M, NodeTypes as N, NodeNames as a };
+//# sourceMappingURL=bundle-rgIbMndg.js.map

package/chunks/bundle-rgIbMndg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-rgIbMndg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/chunks/bundle-tc0rEnB_.js

@@ -0,0 +1,14 @@
+var isEmpty = function (val) { return (val === null || val === undefined); };
+// Some Ids return string and number inconsistently
+// only use to compare IDs
+function compareIds(a, b) {
+    if (isEmpty(a) || isEmpty(b)) {
+        return false;
+    }
+    var aString = a.toString();
+    var bString = b.toString();
+    return aString === bString;
+}
+
+export { compareIds as c };
+//# sourceMappingURL=bundle-tc0rEnB_.js.map

package/chunks/bundle-tc0rEnB_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-tc0rEnB_.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/chunks/bundle-u2CeAx57.js

@@ -0,0 +1,78 @@
+import { a as __spreadArray } from './bundle-c5jegKUx.js';
+import React__default from 'react';
+import { g as getStringSet } from './bundle-LdRGfmOs.js';
+
+var Typography = {
+    H_1: 'H_1',
+    H_2: 'H_2',
+    SUBTITLE_1: 'SUBTITLE_1',
+    SUBTITLE_2: 'SUBTITLE_2',
+    BODY_1: 'BODY_1',
+    BODY_2: 'BODY_2',
+    BUTTON_1: 'BUTTON_1',
+    BUTTON_2: 'BUTTON_2',
+    CAPTION_1: 'CAPTION_1',
+    CAPTION_2: 'CAPTION_2',
+    CAPTION_3: 'CAPTION_3',
+};
+var Colors = {
+    ONBACKGROUND_1: 'ONBACKGROUND_1',
+    ONBACKGROUND_2: 'ONBACKGROUND_2',
+    ONBACKGROUND_3: 'ONBACKGROUND_3',
+    ONBACKGROUND_4: 'ONBACKGROUND_4',
+    ONCONTENT_1: 'ONCONTENT_1',
+    ONCONTENT_2: 'ONCONTENT_2',
+    PRIMARY: 'PRIMARY',
+    ERROR: 'ERROR',
+    SECONDARY_3: 'SECONDARY_3',
+};
+
+function changeTypographyToClassName(type) {
+    switch (type) {
+        case Typography.H_1: return 'sendbird-label--h-1';
+        case Typography.H_2: return 'sendbird-label--h-2';
+        case Typography.SUBTITLE_1: return 'sendbird-label--subtitle-1';
+        case Typography.SUBTITLE_2: return 'sendbird-label--subtitle-2';
+        case Typography.BODY_1: return 'sendbird-label--body-1';
+        case Typography.BODY_2: return 'sendbird-label--body-2';
+        case Typography.BUTTON_1: return 'sendbird-label--button-1';
+        case Typography.BUTTON_2: return 'sendbird-label--button-2';
+        case Typography.CAPTION_1: return 'sendbird-label--caption-1';
+        case Typography.CAPTION_2: return 'sendbird-label--caption-2';
+        case Typography.CAPTION_3: return 'sendbird-label--caption-3';
+        default: return '';
+    }
+}
+function changeColorToClassName(color) {
+    switch (color) {
+        case Colors.ONBACKGROUND_1: return 'sendbird-label--color-onbackground-1';
+        case Colors.ONBACKGROUND_2: return 'sendbird-label--color-onbackground-2';
+        case Colors.ONBACKGROUND_3: return 'sendbird-label--color-onbackground-3';
+        case Colors.ONBACKGROUND_4: return 'sendbird-label--color-onbackground-4';
+        case Colors.ONCONTENT_1: return 'sendbird-label--color-oncontent-1';
+        case Colors.ONCONTENT_2: return 'sendbird-label--color-oncontent-2';
+        case Colors.PRIMARY: return 'sendbird-label--color-primary'; // should be Primary-3 fix me
+        case Colors.ERROR: return 'sendbird-label--color-error';
+        case Colors.SECONDARY_3: return 'sendbird-label--color-secondary-3';
+        default: return '';
+    }
+}
+
+function Label(_a) {
+    var _b = _a.className, className = _b === void 0 ? [] : _b, type = _a.type, color = _a.color, _c = _a.children, children = _c === void 0 ? null : _c;
+    return (
+    // Donot make this into div
+    // Mention uses Label. If we use div, it would break the mention detection on Paste
+    // https://github.com/sendbird/sendbird-uikit-react/pull/479
+    React__default.createElement("span", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-label',
+            changeTypographyToClassName(type),
+            changeColorToClassName(color),
+        ], false).join(' ') }, children));
+}
+var LabelTypography = Typography;
+var LabelColors = Colors;
+var LabelStringSet = getStringSet('en');
+
+export { Label as L, LabelTypography as a, LabelColors as b, LabelStringSet as c, changeColorToClassName as d };
+//# sourceMappingURL=bundle-u2CeAx57.js.map

package/chunks/bundle-u2CeAx57.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-u2CeAx57.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/bundle-v0zf-Toj.js

@@ -0,0 +1,29 @@
+/**
+ * Dashboard UIKitConfig's replyType is consisted of all lowercases,
+ * we need to convert it into uppercase ones(or vice versa)
+ * when we pass the value to internal components
+ *  - 'thread' <-> 'THREAD'
+ *  - 'quote_reply' <-> 'QUOTE_REPLY'
+ */
+function getCaseResolvedReplyType(replyType) {
+    return {
+        lowerCase: replyType.toLowerCase(),
+        upperCase: replyType.toUpperCase(),
+    };
+}
+/**
+ * Dashboard UIKitConfig's threadReplySelectType is consisted of all lowercase letters,
+ * we need to convert it into uppercase ones(or vice versa)
+ * when we pass the value to internal components
+ *  - 'thread' <-> 'THREAD'
+ *  - 'parent' <-> 'PARENT'
+ */
+function getCaseResolvedThreadReplySelectType(threadReplySelectType) {
+    return {
+        lowerCase: threadReplySelectType.toLowerCase(),
+        upperCase: threadReplySelectType.toUpperCase(),
+    };
+}
+
+export { getCaseResolvedReplyType as a, getCaseResolvedThreadReplySelectType as g };
+//# sourceMappingURL=bundle-v0zf-Toj.js.map

package/chunks/bundle-v0zf-Toj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-v0zf-Toj.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/bundle-vUampZQQ.js

@@ -0,0 +1,62 @@
+import React__default, { useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { n as noop } from './bundle-XtwZ5oLQ.js';
+import { L as LocalizationContext } from './bundle-ZSLOjQvb.js';
+import { u as useMediaQueryContext } from './bundle-yCtFACB5.js';
+import IconButton from '../ui/IconButton.js';
+import Button, { ButtonTypes } from '../ui/Button.js';
+import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-u2CeAx57.js';
+
+// simple component to be used as modal root
+var MODAL_ROOT = 'sendbird-modal-root';
+var ModalRoot = function () { return (React__default.createElement("div", { id: MODAL_ROOT, className: MODAL_ROOT })); };
+
+var ModalHeader = function (_a) {
+    var titleText = _a.titleText;
+    return (React__default.createElement("div", { className: "sendbird-modal__header" },
+        React__default.createElement(Label, { type: LabelTypography.H_1, color: LabelColors.ONBACKGROUND_1 }, titleText)));
+};
+var ModalBody = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("div", { className: "sendbird-modal__body" },
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_2 }, children)));
+};
+var ModalFooter = function (_a) {
+    var submitText = _a.submitText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.hideCancelButton, hideCancelButton = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? ButtonTypes.DANGER : _d, onSubmit = _a.onSubmit, onCancel = _a.onCancel;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    return (React__default.createElement("div", { className: "sendbird-modal__footer" },
+        !hideCancelButton && (React__default.createElement(Button, { type: ButtonTypes.SECONDARY, onClick: onCancel },
+            React__default.createElement(Label, { type: LabelTypography.BUTTON_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.BUTTON__CANCEL))),
+        React__default.createElement(Button, { type: type, disabled: disabled, onClick: onSubmit }, submitText)));
+};
+function Modal(props) {
+    var _a = props.children, children = _a === void 0 ? null : _a, _b = props.className, className = _b === void 0 ? '' : _b, _c = props.isCloseOnClickOutside, isCloseOnClickOutside = _c === void 0 ? false : _c, _d = props.isFullScreenOnMobile, isFullScreenOnMobile = _d === void 0 ? false : _d, titleText = props.titleText, submitText = props.submitText, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.hideFooter, hideFooter = _f === void 0 ? false : _f, _g = props.type, type = _g === void 0 ? ButtonTypes.DANGER : _g, 
+    /**
+     * Do not use this! We will deprecate onCancel in v4.
+     */
+    _h = props.onCancel, 
+    /**
+     * Do not use this! We will deprecate onCancel in v4.
+     */
+    onCancel = _h === void 0 ? noop : _h, onClose = props.onClose, _j = props.onSubmit, onSubmit = _j === void 0 ? noop : _j, renderHeader = props.renderHeader;
+    var handleClose = onClose !== null && onClose !== void 0 ? onClose : onCancel;
+    var isMobile = useMediaQueryContext().isMobile;
+    return createPortal((React__default.createElement("div", { className: "\n      sendbird-modal ".concat(className, "\n      ").concat((isFullScreenOnMobile && isMobile) ? 'sendbird-modal--full-mobile' : '', "\n    ") },
+        React__default.createElement("div", { className: "sendbird-modal__content" },
+            (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React__default.createElement(ModalHeader, { titleText: titleText !== null && titleText !== void 0 ? titleText : '' })),
+            React__default.createElement(ModalBody, null, children),
+            !hideFooter && (React__default.createElement(ModalFooter, { disabled: disabled, onCancel: handleClose, onSubmit: onSubmit, submitText: submitText !== null && submitText !== void 0 ? submitText : '', type: type })),
+            React__default.createElement("div", { className: "sendbird-modal__close" },
+                React__default.createElement(IconButton, { width: "32px", height: "32px", onClick: handleClose },
+                    React__default.createElement(Icon, { type: IconTypes.CLOSE, fillColor: IconColors.DEFAULT, width: "24px", height: "24px" })))),
+        React__default.createElement("div", { className: "\n          sendbird-modal__backdrop\n          ".concat(isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside', "\n        "), onClick: function (e) {
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                if (isCloseOnClickOutside) {
+                    handleClose();
+                }
+            } }))), document.getElementById(MODAL_ROOT));
+}
+
+export { Modal as M, MODAL_ROOT as a, ModalRoot as b, ModalFooter as c, ModalHeader as d, ModalBody as e };
+//# sourceMappingURL=bundle-vUampZQQ.js.map

package/chunks/bundle-vUampZQQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-vUampZQQ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/bundle-yCtFACB5.js

@@ -0,0 +1,76 @@
+import React__default, { useState, useEffect } from 'react';
+
+var DEFAULT_MOBILE = false;
+// const DEFAULT_MOBILE = '768px';
+var MOBILE_CLASSNAME = 'sendbird--mobile-mode';
+var MediaQueryContext = React__default.createContext({
+    breakpoint: DEFAULT_MOBILE,
+    isMobile: false,
+});
+var addClassNameToBody = function () {
+    try {
+        var body = document.querySelector('body');
+        body === null || body === void 0 ? void 0 : body.classList.add(MOBILE_CLASSNAME);
+    }
+    catch (_a) {
+        // noop
+    }
+};
+var removeClassNameFromBody = function () {
+    try {
+        var body = document.querySelector('body');
+        body === null || body === void 0 ? void 0 : body.classList.remove(MOBILE_CLASSNAME);
+    }
+    catch (_a) {
+        // noop
+    }
+};
+var MediaQueryProvider = function (props) {
+    var children = props.children, logger = props.logger;
+    var breakpoint = (props === null || props === void 0 ? void 0 : props.breakpoint) || false;
+    var _a = useState(false), isMobile = _a[0], setIsMobile = _a[1];
+    useEffect(function () {
+        var _a;
+        var updateSize = function () {
+            var _a, _b, _c, _d, _e;
+            if (typeof breakpoint === 'boolean') {
+                setIsMobile(breakpoint);
+                if (breakpoint) {
+                    (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: isMobile: true');
+                    addClassNameToBody();
+                }
+                else {
+                    (_b = logger === null || logger === void 0 ? void 0 : logger.info) === null || _b === void 0 ? void 0 : _b.call(logger, 'MediaQueryProvider: isMobile: false');
+                    removeClassNameFromBody();
+                }
+            }
+            else {
+                var mq = window.matchMedia("(max-width: ".concat(breakpoint, ")"));
+                (_c = logger === null || logger === void 0 ? void 0 : logger.info) === null || _c === void 0 ? void 0 : _c.call(logger, "MediaQueryProvider: Screensize updated to ".concat(breakpoint));
+                if (mq.matches) {
+                    setIsMobile(true);
+                    addClassNameToBody();
+                    (_d = logger === null || logger === void 0 ? void 0 : logger.info) === null || _d === void 0 ? void 0 : _d.call(logger, 'MediaQueryProvider: isMobile: true');
+                }
+                else {
+                    setIsMobile(false);
+                    removeClassNameFromBody();
+                    (_e = logger === null || logger === void 0 ? void 0 : logger.info) === null || _e === void 0 ? void 0 : _e.call(logger, 'MediaQueryProvider: isMobile: false');
+                }
+            }
+        };
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: addEventListener', { updateSize: updateSize });
+        return function () {
+            var _a;
+            window.removeEventListener('resize', updateSize);
+            (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: removeEventListener', { updateSize: updateSize });
+        };
+    }, [breakpoint]);
+    return (React__default.createElement(MediaQueryContext.Provider, { value: { breakpoint: breakpoint, isMobile: isMobile } }, children));
+};
+var useMediaQueryContext = function () { return React__default.useContext(MediaQueryContext); };
+
+export { MediaQueryProvider as M, useMediaQueryContext as u };
+//# sourceMappingURL=bundle-yCtFACB5.js.map