@sendbird/uikit-react 3.14.12 → 3.14.13

package/cjs/chunks/{bundle-BcQlym8e.js → bundle-BXjyJKxX.js}

@@ -2,6 +2,10 @@
 
 var React = require('react');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 var ComponentType;
 (function (ComponentType) {
     ComponentType["Box"] = "box";
@@ -56,7 +60,7 @@ const createParser = (params) => {
     };
 };
 
-const FRAGMENT = ({ children }) => React.createElement(React.Fragment, null, children);
+const FRAGMENT = ({ children }) => React__default.default.createElement(React__default.default.Fragment, null, children);
 function createRenderer(params) {
     var _a, _b, _c, _d, _e, _f;
     return {
@@ -92,7 +96,7 @@ const SizeContextProvider = ({ children }) => {
             setSizes((prevSizes) => (Object.assign(Object.assign({}, prevSizes), { [id]: rest })));
         }
     }, []);
-    return React.createElement(SizeContext.Provider, { value: { sizes, updateSize } }, children);
+    return React__default.default.createElement(SizeContext.Provider, { value: { sizes, updateSize } }, children);
 };
 const useSizeContext = () => React.useContext(SizeContext);
 
@@ -198,13 +202,13 @@ const defaultProperties = {
 };
 
 const createMessageTemplate = (opts) => {
-    const Container = opts.Container || React.Fragment;
+    const Container = opts.Container || React__default.default.Fragment;
     const UnknownMessage = opts.UnknownMessage || (() => null);
     const parser = opts.parser || createParser();
     const renderer = opts.renderer || createRenderer();
     const MessageTemplateBase = ({ templateItems, parentLayout = defaultProperties.box.layout, isRoot = false, }) => {
         const renderItems = templateItems;
-        return (React.createElement(React.Fragment, null, renderItems.map((item, index, siblings) => {
+        return (React__default.default.createElement(React__default.default.Fragment, null, renderItems.map((item, index, siblings) => {
             const { properties } = parser.parse(item, { parentLayout, elemIdx: index, siblings });
             const props = {
                 key: index,
@@ -221,27 +225,27 @@ const createMessageTemplate = (opts) => {
                     if (!item.items || !Array.isArray(item.items) || item.items.length === 0) {
                         throw new Error('Cannot parse template item as Carousel if carousel has no items.');
                     }
-                    return (React.createElement(renderer.carouselView, Object.assign({}, item, props), item.items.map((items, index) => (React.createElement(MessageTemplateBase, { key: index, templateItems: items || [], parentLayout: parentLayout })))));
+                    return (React__default.default.createElement(renderer.carouselView, Object.assign({}, item, props), item.items.map((items, index) => (React__default.default.createElement(MessageTemplateBase, { key: index, templateItems: items || [], parentLayout: parentLayout })))));
                 }
                 case ComponentType.Box: {
-                    return (React.createElement(renderer.box, Object.assign({}, item, props),
-                        React.createElement(MessageTemplateBase, { templateItems: item.items || [], parentLayout: item.layout })));
+                    return (React__default.default.createElement(renderer.box, Object.assign({}, item, props),
+                        React__default.default.createElement(MessageTemplateBase, { templateItems: item.items || [], parentLayout: item.layout })));
                 }
                 case ComponentType.Text: {
-                    return React.createElement(renderer.text, Object.assign({}, item, props));
+                    return React__default.default.createElement(renderer.text, Object.assign({}, item, props));
                 }
                 case ComponentType.Image: {
-                    return React.createElement(renderer.image, Object.assign({}, item, props));
+                    return React__default.default.createElement(renderer.image, Object.assign({}, item, props));
                 }
                 case ComponentType.TextButton: {
-                    return React.createElement(renderer.textButton, Object.assign({}, item, props));
+                    return React__default.default.createElement(renderer.textButton, Object.assign({}, item, props));
                 }
                 case ComponentType.ImageButton: {
-                    return React.createElement(renderer.imageButton, Object.assign({}, item, props));
+                    return React__default.default.createElement(renderer.imageButton, Object.assign({}, item, props));
                 }
                 default: {
                     // or throw new Error('Cannot parse template item')
-                    return React.createElement(UnknownMessage, { item: item });
+                    return React__default.default.createElement(UnknownMessage, { item: item });
                 }
             }
         })));
@@ -259,9 +263,9 @@ const createMessageTemplate = (opts) => {
             if (Array.isArray(items) && items.length > 0) {
                 isCarousel = items[0].type === exports.CompositeComponentType.Carousel;
             }
-            return (React.createElement(SizeContextProvider, null,
-                React.createElement(Container, { className: isCarousel ? 'sb-message-template__parent_for_carousel' : '' },
-                    React.createElement(MessageTemplateBase, { parentLayout: parentLayout, templateItems: items, isRoot: true }))));
+            return (React__default.default.createElement(SizeContextProvider, null,
+                React__default.default.createElement(Container, { className: isCarousel ? 'sb-message-template__parent_for_carousel' : '' },
+                    React__default.default.createElement(MessageTemplateBase, { parentLayout: parentLayout, templateItems: items, isRoot: true }))));
         },
         MessageTemplateBase,
     };
@@ -1145,9 +1149,9 @@ function CarouselItem({ item, defaultWidth, marginRight }) {
     if (marginRight) {
         style['marginRight'] = marginRight;
     }
-    return React.createElement("div", { style: style }, item);
+    return React__default.default.createElement("div", { style: style }, item);
 }
-const Carousel = React.memo(({ children, gap = GAP_DEFAULT }) => {
+const Carousel = React__default.default.memo(({ children, gap = GAP_DEFAULT }) => {
     var _a, _b;
     const carouselRef = React.useRef(null);
     const screenWidth = window.innerWidth;
@@ -1300,11 +1304,11 @@ const Carousel = React.memo(({ children, gap = GAP_DEFAULT }) => {
             return itemPosition;
         });
     }
-    return (React.createElement("div", { ref: carouselRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: "sb-message-template__carousel", style: {
+    return (React__default.default.createElement("div", { ref: carouselRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: "sb-message-template__carousel", style: {
             cursor: draggingInfo.dragging ? 'grabbing' : 'grab',
             transition: draggingInfo.dragging ? 'none' : 'transform 0.5s ease',
             transform: `translateX(${getCurrentTranslateX()}px)`,
-        } }, children.map((item, index) => (React.createElement(CarouselItem, { key: index + '', item: item, defaultWidth: defaultItemWidth + 'px', marginRight: index < children.length - 1 ? gap : undefined })))));
+        } }, children.map((item, index) => (React__default.default.createElement(CarouselItem, { key: index + '', item: item, defaultWidth: defaultItemWidth + 'px', marginRight: index < children.length - 1 ? gap : undefined })))));
 });
 
 function isWrappedText(view) {
@@ -1348,7 +1352,7 @@ var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
 };
 const CanvasReactMessageTemplateImage = (props) => {
     const { imageSize, canvasRef, canvasProps } = useCanvasMessageTemplateImage(props);
-    return (React.createElement("canvas", Object.assign({}, canvasProps, { ref: canvasRef, width: imageSize === null || imageSize === void 0 ? void 0 : imageSize.width, height: imageSize === null || imageSize === void 0 ? void 0 : imageSize.height, onError: props.onError })));
+    return (React__default.default.createElement("canvas", Object.assign({}, canvasProps, { ref: canvasRef, width: imageSize === null || imageSize === void 0 ? void 0 : imageSize.width, height: imageSize === null || imageSize === void 0 ? void 0 : imageSize.height, onError: props.onError })));
 };
 const useCanvasMessageTemplateImage = (_a) => {
     var { metaData, tintColor } = _a, props = __rest$3(_a, ["metaData", "tintColor"]);
@@ -1415,11 +1419,11 @@ const useCanvasMessageTemplateImage = (_a) => {
 };
 
 const ImgReactMessageTemplateImage = (props) => {
-    return React.createElement("img", Object.assign({}, props, { onError: props.onError, referrerPolicy: "no-referrer" }));
+    return React__default.default.createElement("img", Object.assign({}, props, { onError: props.onError, referrerPolicy: "no-referrer" }));
 };
 
 const PlaceholderReactMessageTemplateImage = (props) => {
-    return React.createElement("div", { style: Object.assign(Object.assign({}, props.style), { backgroundColor: 'transparent' }) });
+    return React__default.default.createElement("div", { style: Object.assign(Object.assign({}, props.style), { backgroundColor: 'transparent' }) });
 };
 
 var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
@@ -1439,13 +1443,13 @@ const ReactMessageTemplateImage = (_a) => {
     if (props.onError)
         console.warn('`onError` is intercepted and not executed in the ReactMessageTemplateImage.');
     if (hasError) {
-        return React.createElement(PlaceholderReactMessageTemplateImage, Object.assign({}, props));
+        return React__default.default.createElement(PlaceholderReactMessageTemplateImage, Object.assign({}, props));
     }
     else if (tintColor && !isGif(props.src)) {
-        return React.createElement(CanvasReactMessageTemplateImage, Object.assign({}, props, { onError: onError, tintColor: tintColor, metaData: metaData }));
+        return React__default.default.createElement(CanvasReactMessageTemplateImage, Object.assign({}, props, { onError: onError, tintColor: tintColor, metaData: metaData }));
     }
     else {
-        return React.createElement(ImgReactMessageTemplateImage, Object.assign({}, props, { onError: onError }));
+        return React__default.default.createElement(ImgReactMessageTemplateImage, Object.assign({}, props, { onError: onError }));
     }
 };
 const useImageLoadError = (source) => {
@@ -1459,18 +1463,18 @@ const useImageLoadError = (source) => {
 
 // create a context provider for MessageComponent
 //  - this is a wrapper for MessageComponent
-const MessageContext = React.createContext(null);
+const MessageContext = React__default.default.createContext(null);
 const MessageProvider = (props) => {
     const { message, handleWebAction, handleCustomAction, handlePredefinedAction, children } = props;
-    const value = React.useMemo(() => ({
+    const value = React__default.default.useMemo(() => ({
         message,
         handleWebAction,
         handleCustomAction,
         handlePredefinedAction,
     }), [message === null || message === void 0 ? void 0 : message.updatedAt]);
-    return React.createElement(MessageContext.Provider, { value: value }, children);
+    return React__default.default.createElement(MessageContext.Provider, { value: value }, children);
 };
-const useMessageContext = () => React.useContext(MessageContext);
+const useMessageContext = () => React__default.default.useContext(MessageContext);
 
 /**
  * Preserves a reference to the given callback function as an argument while the component is mounted.
@@ -1883,11 +1887,11 @@ const ActionHandler = ({ className = '', style, children, props }) => {
     };
     const borderClass = ((_a = props.viewStyle) === null || _a === void 0 ? void 0 : _a.borderWidth) ? ' sb-message-template__border' : '';
     if (className === 'sb-message-template__text-button') {
-        return (React.createElement("button", { className: `${className}${borderClass}`, "data-sb-template-id": props.elementId, style: Object.assign(Object.assign({}, style), { paddingTop: (_c = (_b = props.viewStyle) === null || _b === void 0 ? void 0 : _b.padding) === null || _c === void 0 ? void 0 : _c.top, paddingRight: (_e = (_d = props.viewStyle) === null || _d === void 0 ? void 0 : _d.padding) === null || _e === void 0 ? void 0 : _e.right, paddingBottom: (_g = (_f = props.viewStyle) === null || _f === void 0 ? void 0 : _f.padding) === null || _g === void 0 ? void 0 : _g.bottom, paddingLeft: (_j = (_h = props.viewStyle) === null || _h === void 0 ? void 0 : _h.padding) === null || _j === void 0 ? void 0 : _j.left }), onClick: onClick }, children));
+        return (React__default.default.createElement("button", { className: `${className}${borderClass}`, "data-sb-template-id": props.elementId, style: Object.assign(Object.assign({}, style), { paddingTop: (_c = (_b = props.viewStyle) === null || _b === void 0 ? void 0 : _b.padding) === null || _c === void 0 ? void 0 : _c.top, paddingRight: (_e = (_d = props.viewStyle) === null || _d === void 0 ? void 0 : _d.padding) === null || _e === void 0 ? void 0 : _e.right, paddingBottom: (_g = (_f = props.viewStyle) === null || _f === void 0 ? void 0 : _f.padding) === null || _g === void 0 ? void 0 : _g.bottom, paddingLeft: (_j = (_h = props.viewStyle) === null || _h === void 0 ? void 0 : _h.padding) === null || _j === void 0 ? void 0 : _j.left }), onClick: onClick }, children));
     }
     const { display, flexDirection, justifyContent, alignItems, objectFit } = recalculatedStyle, wrapperStyles = __rest(recalculatedStyle, ["display", "flexDirection", "justifyContent", "alignItems", "objectFit"]);
-    return (React.createElement("div", { ref: elemRef, className: `${className}${borderClass} ${(props === null || props === void 0 ? void 0 : props.action) ? 'sb-message-template__action' : ''}`, "data-sb-template-id": props.elementId, style: wrapperStyles, onClick: onClick },
-        React.createElement("div", { style: {
+    return (React__default.default.createElement("div", { ref: elemRef, className: `${className}${borderClass} ${(props === null || props === void 0 ? void 0 : props.action) ? 'sb-message-template__action' : ''}`, "data-sb-template-id": props.elementId, style: wrapperStyles, onClick: onClick },
+        React__default.default.createElement("div", { style: {
                 display,
                 flexDirection,
                 justifyContent,
@@ -1915,9 +1919,9 @@ function isFixedOrFill(view) {
     return isFixedDiamension || isFill;
 }
 function convertNewlinesToBr(text) {
-    return text.split('\n').map((line, index) => (React.createElement(React.Fragment, { key: index },
+    return text.split('\n').map((line, index) => (React__default.default.createElement(React__default.default.Fragment, { key: index },
         line,
-        React.createElement("br", null))));
+        React__default.default.createElement("br", null))));
 }
 function renderText(view) {
     const { text, maxTextLines } = view;
@@ -1926,34 +1930,34 @@ function renderText(view) {
     const convertedText = convertNewlinesToBr(text);
     if (isMultiLine || isToBeWrapped) {
         const wrapperStyling = Object.assign(Object.assign({}, ((isMultiLine || isToBeWrapped) && { maxWidth: '100%' })), (isToBeWrapped && { maxHeight: '100%', overflow: 'hidden' }));
-        return (React.createElement("div", { style: wrapperStyling }, isMultiLine ? React.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText));
+        return (React__default.default.createElement("div", { style: wrapperStyling }, isMultiLine ? React__default.default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText));
     }
-    return isMultiLine ? React.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText;
+    return isMultiLine ? React__default.default.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, convertedText) : convertedText;
 }
 const renderer = createRenderer({
     views: {
         box(props) {
-            return (React.createElement(ActionHandler, { className: "sb-message-template__box", elementId: props.elementId, style: props.parsedProperties, props: props }, props.children));
+            return (React__default.default.createElement(ActionHandler, { className: "sb-message-template__box", elementId: props.elementId, style: props.parsedProperties, props: props }, props.children));
         },
         text(props) {
-            return (React.createElement(ActionHandler, { className: "sb-message-template__text", elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(props)));
+            return (React__default.default.createElement(ActionHandler, { className: "sb-message-template__text", elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(props)));
         },
         image(props) {
             var _a;
             // todo: add image backup
-            return (React.createElement(ActionHandler, { className: "sb-message-template__image-container", elementId: props.elementId, style: props.parsedProperties, props: props },
-                React.createElement(ReactMessageTemplateImage, { className: "sb-message-template__image", alt: "image", src: props.imageUrl, style: { width: '100%', height: '100%', aspectRatio: 'inherit', objectFit: 'inherit' }, tintColor: (_a = props.imageStyle) === null || _a === void 0 ? void 0 : _a.tintColor, metaData: props.metaData })));
+            return (React__default.default.createElement(ActionHandler, { className: "sb-message-template__image-container", elementId: props.elementId, style: props.parsedProperties, props: props },
+                React__default.default.createElement(ReactMessageTemplateImage, { className: "sb-message-template__image", alt: "image", src: props.imageUrl, style: { width: '100%', height: '100%', aspectRatio: 'inherit', objectFit: 'inherit' }, tintColor: (_a = props.imageStyle) === null || _a === void 0 ? void 0 : _a.tintColor, metaData: props.metaData })));
         },
         textButton(props) {
-            return (React.createElement(ActionHandler, { className: "sb-message-template__text-button", elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(Object.assign({ maxTextLines: 1 }, props))));
+            return (React__default.default.createElement(ActionHandler, { className: "sb-message-template__text-button", elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(Object.assign({ maxTextLines: 1 }, props))));
         },
         imageButton(props) {
             var _a;
-            return (React.createElement(ActionHandler, { className: "sb-message-template__image-container sb-message-template__image-button", elementId: props.elementId, style: props.parsedProperties, props: props },
-                React.createElement(ReactMessageTemplateImage, { className: "sb-message-template__image", alt: "image-button", src: props.imageUrl, style: { width: '100%', height: '100%', aspectRatio: 'inherit', objectFit: 'inherit' }, tintColor: (_a = props.imageStyle) === null || _a === void 0 ? void 0 : _a.tintColor, metaData: props.metaData })));
+            return (React__default.default.createElement(ActionHandler, { className: "sb-message-template__image-container sb-message-template__image-button", elementId: props.elementId, style: props.parsedProperties, props: props },
+                React__default.default.createElement(ReactMessageTemplateImage, { className: "sb-message-template__image", alt: "image-button", src: props.imageUrl, style: { width: '100%', height: '100%', aspectRatio: 'inherit', objectFit: 'inherit' }, tintColor: (_a = props.imageStyle) === null || _a === void 0 ? void 0 : _a.tintColor, metaData: props.metaData })));
         },
         carouselView(props) {
-            return React.createElement(Carousel, { gap: props.spacing }, props.children);
+            return React__default.default.createElement(Carousel, { gap: props.spacing }, props.children);
         },
     },
 });
@@ -2004,7 +2008,7 @@ createMessageTemplate({
     renderer,
     parser,
     Container: ({ children, className }) => {
-        return (React.createElement("div", { className: `sb-message-template__parent ${className}`, style: {
+        return (React__default.default.createElement("div", { className: `sb-message-template__parent ${className}`, style: {
                 display: 'flex',
                 flexDirection: 'column',
                 maxWidth: 400,
@@ -2018,7 +2022,7 @@ var CustomTemplate = createMessageTemplate({
     renderer: renderer,
     Container: function (_a) {
         var children = _a.children, className = _a.className;
-        return (React.createElement("div", { className: [
+        return (React__default.default.createElement("div", { className: [
                 "sb-message-template__parent ".concat(className),
                 'sendbird-message-template__root',
             ].join(' ') }, children));
@@ -2026,9 +2030,9 @@ var CustomTemplate = createMessageTemplate({
 }).MessageTemplate;
 function MessageTemplate(_a) {
     var templateItems = _a.templateItems, templateVersion = _a.templateVersion;
-    return React.createElement(CustomTemplate, { templateItems: templateItems, templateVersion: templateVersion });
+    return React__default.default.createElement(CustomTemplate, { templateItems: templateItems, templateVersion: templateVersion });
 }
 
 exports.MessageProvider = MessageProvider;
 exports.MessageTemplate = MessageTemplate;
-//# sourceMappingURL=bundle-BcQlym8e.js.map
+//# sourceMappingURL=bundle-BXjyJKxX.js.map